使所有圖像在引導程序中以相同高度顯示

Question

我想讓所有4行圖像都具有相同的高度尺寸，我已嘗試使用css玩弄寬度和高度，但似乎沒有任何工作，肖像圖片最後總是比那些景觀高，下面的代碼：

<div class="container" > 
    <div class="jumbotron" style="background: rgba(200, 54, 54, 0.0);"> 
     <div class="row"> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#"><img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /></a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">One Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#"><img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /></a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Another Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#"><img class="left-block img-responsive" src="images/genimage2.jpg" height="160" width="160" alt="" /></a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Another another Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#"><img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /></a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Any other Random Item Any other Random Item </p> 
       <p>50 €</p> 
      </div> 
     </div> 

這是發生了什麼：

這就是我想要的（都具有相同的高度）

Answer 1

你可以起飛的HTML寬度/高度屬性和與CSS做到這一點。只需明確設置高度，並將寬度設置爲auto。例如：

.img-responsive { 
    width: auto; 
    height: 100px; 
} 

你要小心，你留下足夠的空間水平，因爲你不會知道這些圖像的精確寬度，一旦他們被縮小。

Answer 2

這是一個快速反應的方式。

.img-wrapper { 
    position: relative; 
    padding-bottom: 100%; 
    overflow: hidden; 
    width: 100%; 
} 
.img-wrapper img { 
    position: absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 


<div class="container" > 
    <div class="jumbotron" style="background: rgba(200, 54, 54, 0.0);"> 
     <div class="row"> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#" class="img-wrapper"> 
        <img class="left-block" src="images/genimage.png"alt="" /> 
       </a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">One Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#" class="img-wrapper"> 
        <img class="left-block" src="images/genimage.png"alt="" /> 
       </a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Another Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#" class="img-wrapper"> 
        <img class="left-block" src="images/genimage.png"alt="" /> 
       </a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Another another Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#" class="img-wrapper"> 
        <img class="left-block" src="images/genimage.png"alt="" /> 
       </a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Any other Random Item Any other Random Item </p> 
       <p>50 €</p> 
      </div> 
     </div> 

您將與的填充底打IMG的方式包裝了一下，讓您的影像出現在高度，如果你想在圖像顯示不是100％的關口，但希望他們塊你可以從包裝中刪除寬度100％，並添加顯示塊和自定義寬度，但這應該工作。