Tüm resimlerin önyükleme sırasında aynı yükseklikte görüntülenmesi

Question

Tüm 4 görüntü dizisinin hepsinin aynı Yükseklik boyutuna sahip olmasını sağlamaya çalışıyorum, css kullanarak genişlik ve yükseklikle oynamayı denedim ancak hiçbir şey işe yaramıyor gibi görünüyor,

<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> 

Bu olur::

Bu portre görüntüleri daima yatay olanlara göre daha uzun boylu sonunda, burada kod i (aynı yüksekliğe sahip tüm)

Answer 1

Sen genişlik/yükseklik HTML niteliklerini çıkarmak ve CSS ile bu yapabileceğini istediğiniz şeydir. Sadece boyunu açıkça ve genişliğini auto olarak ayarla. Örneğin: bunlar ölçekli kıldıktan sonra bu resimlerden herhangi tam genişliğini bilemezsiniz yatay çünkü

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

Sen yeterince boşluk bırakın o dikkatli olmak gerekir.

Answer 2

İşte bunun için duyarlı bir yol.

.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> 

boyunu görünmesini görüntüleri almak için biraz-sarıcı img ait padding-alt oynamak zorunda kalacak ve isterseniz görüntüleri col değil% 100 görüntüler ancak bunları bloğu istediğiniz genişliği% 100'lük paketleyiciden kaldırabilir ve istediğiniz görüntü bloğu ve özel bir genişlik ekleyebilirsiniz, ancak bu işe yarayacaktır.