Making all images appear with the same height in bootstrap

Question

I am trying to make all a row of 4 images all have the same Height size, I already tried to play around with the width and height using css but nothing seems to work, the portrait images always end up taller than the landscape ones, here's 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>

This is what happens:

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

Answer 1

You could take off the width/height attributes in the HTML and do this with CSS. Just set your height explicitly, and your width as auto. For example:

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

You'll need to be careful that you leave enough space horizontally because you won't know the exact width of any of these images once they've been scaled.

Answer 2

Here is a responsive way to go about it.

.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 with the padding-bottom of the img-wrapper a bit to get your images to appear the height and if you want the images to display not 100% of the col but want them block you can remove the width 100% from the wrapper and add display block and a custom width you want but this should work.