Выполнение всех изображений с одинаковой высотой в загрузочном блоке

Question

Я пытаюсь сделать все строки из четырех изображений одинаковыми по высоте, я уже пытался играть с шириной и высотой с помощью 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% от обертки и добавить блок отображения и пользовательскую ширину, которую вы хотите, но это должно сработать.