爲什麼自舉列中的img行爲不起作用？

Question

即使我設置了height和width，番茄圖片也比其他人高。我敢肯定這件事情很簡單：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
     <a href="#"><img src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg" class="img-responsive projects img-thumbnail" width="230" height="230"></a> 
 
     <div class="caption text-center">Weather App</div> 
 
\t \t </div> 
 
     
 
     <div class="col-md-4"> 
 
     <a href="#"><img src="http://i1121.photobucket.com/albums/l514/sterzarino/TomatoClock.jpg" class="img-responsive projects img-thumbnail" width="230" height="230"></a> 
 
     <div class="caption text-center">Weather App</div> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <a href="#"><img src="http://i1121.photobucket.com/albums/l514/sterzarino/soup.jpg" class="img-responsive projects img-thumbnail" width="230" height="230"></a> 
 
     <div class="caption text-center">Recipe Book</div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

，因爲你正在使用.img-responsive和.img-thumbnail這兩個設置在CSS max-width:100%，因此重寫HTML width/height標籤

加不使用HTML標籤爲width/height

與此相同height，你可以做這樣的事情（不失寬高比）：

.row img { 
 
    max-height: 120px 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4 col-md-4 text-center"> 
 
     <a href="#"> 
 
     <img src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg" class="img-responsive projects img-thumbnail"> 
 
     </a> 
 
     <div class="caption">Weather App</div> 
 
    </div> 
 

 
    <div class="col-xs-4 col-md-4 text-center"> 
 
     <a href="#"> 
 
     <img src="http://i1121.photobucket.com/albums/l514/sterzarino/TomatoClock.jpg" class="img-responsive projects img-thumbnail"> 
 
     </a> 
 
     <div class="caption">Weather App</div> 
 
    </div> 
 

 
    <div class="col-xs-4 col-md-4 text-center"> 
 
     <a href="#"> 
 
     <img src="http://i1121.photobucket.com/albums/l514/sterzarino/soup.jpg" class="img-responsive projects img-thumbnail"> 
 
     </a> 
 
     <div class="caption">Recipe Book</div> 
 
    </div> 
 
    </div>

Answer 2

我認爲這是自舉的響應圖像與它搞亂。覆蓋它在CSS像這樣

img { 
    width: 230px !important; 
    height: 230px !important; 
} 

Fiddle

Answer 3

設置在CSS定製寬度和高度像這樣引導覆蓋：

.img-thumbnail{ 
    width: 230px; 
    height:230px; 
} 

Answer 4

我會建議從使用<img>更改爲使用圖像作爲背景。 Bootstrap不是一切，如果沒有合適的話，你仍然可以添加你自己的樣式。

背景是好的，因爲你可以修剪掉兩端，它不會拉伸圖像。

.projects.img-thumbnail[style] { 
 
    width:100%; 
 
    height:200px; 
 
    background-size:cover; 
 
    background-position: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-xs-4"> 
 
    <a href="#"><span style="background-image: url(http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg)" class="img-responsive projects img-thumbnail"></span></a> 
 
    <div class="caption text-center">Weather App</div> 
 
    </div> 
 

 
    <div class="col-xs-4"> 
 
    <a href="#"><span style="background-image: url(http://i1121.photobucket.com/albums/l514/sterzarino/TomatoClock.jpg)" class="img-responsive projects img-thumbnail"></span></a> 
 
    <div class="caption text-center">Weather App</div> 
 
    </div> 
 

 
    <div class="col-xs-4"> 
 
    <a href="#"><span style="background-image: url(http://i1121.photobucket.com/albums/l514/sterzarino/soup.jpg)" class="img-responsive projects img-thumbnail"></span></a> 
 
    <div class="caption text-center">Recipe Book</div> 
 
    </div> 
 
</div>

但據我所知，目前還使其成爲一個正方形，除了涉及::before或::after僞選擇的沒有簡單的方法。