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" >
    <divclass="jumbotron"style="background: rgba(200, 54, 54, 0.0);"><divclass="row"><divclass="col-lg-3 col-md-6 col-sm-12 col-xs-12"><ahref="#"class="img-wrapper"><imgclass="left-block"src="images/genimage.png"alt="" /></a><pstyle="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">One Random Item</p><p>50 €</p></div><divclass="col-lg-3 col-md-6 col-sm-12 col-xs-12"><ahref="#"class="img-wrapper"><imgclass="left-block"src="images/genimage.png"alt="" /></a><pstyle="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Another Random Item</p><p>50 €</p></div><divclass="col-lg-3 col-md-6 col-sm-12 col-xs-12"><ahref="#"class="img-wrapper"><imgclass="left-block"src="images/genimage.png"alt="" /></a><pstyle="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Another another Random Item</p><p>50 €</p></div><divclass="col-lg-3 col-md-6 col-sm-12 col-xs-12"><ahref="#"class="img-wrapper"><imgclass="left-block"src="images/genimage.png"alt="" /></a><pstyle="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.