最小寬度和最大寬度不能在圖像上工作

詳細信息：我使用引導程序，試圖保持我的圖片寬高比並根據屏幕大小使其響應。最小寬度和最大寬度不能在圖像上工作

問題：我有我的畫面的寬度設置爲18％，高度爲auto，這樣的圖片並根據屏幕的寬度，但在屏幕的寬度小，畫面將變得太小，分鐘的調整，如果我嘗試增加寬度％，然後在正常的屏幕尺寸上，圖片變得太大。所以我試圖在圖片上設置最大寬度和最小寬度，這在圖片上顯然沒有任何影響！

的html代碼：

<div id="aboutcard" class="card" style="background-color:white;"> 
    <h1 class="cardheads">About</h1> 
    <img id="mypic" class="img-responsive" src="mypicround.png" width="18%"> 
</div>

CSS代碼：

#mypic 
{ 
    margin-right : auto; 
    margin-left : auto; 
    min-width : 200px; 
    max-width : 350px; 
} 
.card 
{ 
width : 100%; 
height : 830px; 
margin : 0 auto; 
background-color : #C00000; 
}

bootstrap.css

.img-responsive, 
.thumbnail > img, 
.thumbnail a > img, 
.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
display: block; 
max-width: 100%; 
height: auto; 
}

任何幫助接收，將不勝感激！

來源

2016-04-19 programmingandroid

嘗試加入'important'到這裏！規則：'min-width：200px！important;最大寬度：320px！important;'。 –

它的工作！非常感謝。 – programmingandroid

另一種選擇，不是訴諸'！important'，你可以嘗試去除''元素本身的寬度並將其移動到CSS。我相信如果它有效，那將是一個更好的解決方案。 – timolawl

嘗試將!important添加到此規則中：min-width: 200px !important; max-width: 320px !important;。

來源

2016-04-19 11:32:12

您可以通過給寬度試試這個：汽車

#mypic 
{ 
    margin-right : auto; 
    margin-left : auto; 
    min-width : 200px; 
    max-width : 350px; 
    width:auto; 
}

來源

2016-04-19 11:32:37

另一種選擇，而不是訴諸!important是對<img>元素本身上刪除width並將其移動到CSS。

例如（我說，你可以調整窗口的大小，以測試工作圖像）：

#mypic { 
 
    width: 18%; 
 
    height: auto; 
 
    margin-right : auto; 
 
    margin-left : auto; 
 
    min-width : 200px; 
 
    max-width : 350px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div> 
 
<img id="mypic" class="img-responsive" src="https://res.cloudinary.com/timolawl/image/upload/v1457416170/Paul-Walker-6.jpg" /> 
 
    </div>

來源

2016-04-19 11:33:46 timolawl

使用

.card img.img-responsive#mypic{ 
    margin-right : auto; 
    margin-left : auto; 
    min-width : 200px; 
    max-width : 350px; 
}

來源

2016-04-19 11:36:31

最小寬度和最大寬度不能在圖像上工作

回答

相關問題