Create all images with the same height in bootstrap

Question

I try to make all lines of 4 images the same height, I already tried to play with width and height using css, but nothing works, portrait images always turn out to be higher than the landscape, here is the code:

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

Here's what happens:

This is what I want (all with the same height)

Answer 1

You can remove the width / height attributes in HTML and do this with CSS. Just set your height explicitly and your width is auto . For instance:

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

You need to be careful that you leave enough horizontal space, because you will not know the exact width of any of these images after they have been scaled.

Answer 2

Here is a responsive way to do this.

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

You will have to play a little with the bottom of the img wrapper so that your images are displayed in height, and if you want the images to be displayed not at 100% of the column, but want to block them, you can remove the width of 100% of the wrapper and add a display block and custom width you want, but this should work.