Making All Images Appear With The Same Height In Bootstrap

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

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

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