How to make same height of all responsive images in a row - html

Question

The first image of the row doesn't have the same height as the other ones. I am using Bootstrap .img-responsive.
HTML
<div class="row">
<div class="down-content">
<div class="haber">
<!--HABER 1-->
<div class="col-sm-3">
<div id="haber1">
<div id="haberimg1">
<img class="img-responsive" src="http://www.avukatwebsite.net/public/_uploads/photos/temalar/avukat-web-site-tema-1.jpg" >
</div>
<div id="haberyazi1">
<h3>Kanser Affetmedi...</h3>
<p>Sanssiz genc Kanser yüzünden öldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
<!--HABER 2-->
<div class="col-sm-3">
<div id="haber2">
<div id="haberimg2">
<img class="img-responsive" src="http://medicare.bold-themes.com/clinic/wp-content/uploads/sites/2/2015/12/shutterstock_288977717-1200x800.jpg" >
</div>
<div id="haberyazi2">
<h3>Sizofreni Salgini</h3>
<p>Türkiyede ki Sizofren sayisinda artis görüldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
/* we deleted the other parts because of mostly code problem */
</div>
<!--HABER BÖLÜMÜ BITIS-->
</div>
</div>
Bootstrap CSS
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}
This is the issue:

Answer 1

There are a number of solutions. Here is a couple of similar solutions. First you would need to create a div that scales responsively. This can be achieved with:
.img-wrap {
height:0;
// adjust the padding to change the aspect ratio of the div
padding-bottom:60%;
}
you can then either add a background image to the .image-wrap element with background-size:cover. Or you could place an image inside .image-wrap and then position:absolute; it inside .image-wrap and add object-fit: cover; width: 100%; height: 100%;.

Answer 2

Answer 1:
You have to set a fixed height to the img parent div and then set height:100% to the img Check below Snippet:
.haberImg {
height: 75px;
}
.haberImg img {
height: 100%;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="down-content">
<div class="haber">
<!--HABER 1-->
<div class="col-xs-3">
<div id="haber1">
<div id="haberimg1" class="haberImg">
<img class="img-responsive" src="http://www.avukatwebsite.net/public/_uploads/photos/temalar/avukat-web-site-tema-1.jpg"></div>
<div id="haberyazi1">
<h3>Kanser Affetmedi...</h3>
<p>Sanssiz genc Kanser yüzünden öldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
<!--HABER 2-->
<div class="col-xs-3">
<div id="haber2">
<div id="haberimg2" class="haberImg">
<img class="img-responsive" src="http://medicare.bold-themes.com/clinic/wp-content/uploads/sites/2/2015/12/shutterstock_288977717-1200x800.jpg"></div>
<div id="haberyazi2">
<h3>Sizofreni Salgini</h3>
<p>Türkiyede ki Sizofren sayisinda artis görüldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
</div>
</div>
Answer 2:
You have to set a fixed height to the img parent div as the smallest img height and then add overflow:hidden. Check below Snippet:
.haberImg {
height: 80px;
overflow:hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="down-content">
<div class="haber">
<!--HABER 1-->
<div class="col-xs-3">
<div id="haber1">
<div id="haberimg1" class="haberImg">
<img class="img-responsive" src="http://www.avukatwebsite.net/public/_uploads/photos/temalar/avukat-web-site-tema-1.jpg"></div>
<div id="haberyazi1">
<h3>Kanser Affetmedi...</h3>
<p>Sanssiz genc Kanser yüzünden öldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
<!--HABER 2-->
<div class="col-xs-3">
<div id="haber2">
<div id="haberimg2" class="haberImg">
<img class="img-responsive" src="http://medicare.bold-themes.com/clinic/wp-content/uploads/sites/2/2015/12/shutterstock_288977717-1200x800.jpg"></div>
<div id="haberyazi2">
<h3>Sizofreni Salgini</h3>
<p>Türkiyede ki Sizofren sayisinda artis görüldü...</p>
<button type="button" class="btn">Devamini Oku...</button>
</div>
</div>
</div>
</div>
</div>

Answer 3

A simple way is to use images that have the same width and the same height! (You avoid a lot of problems and there is no need to fix something with CSS)
HTML
<div class="row">
<div class="col-sm-3">
<img src="http://placehold.it/400x300" alt="" class="img-responsive">
<h3>Heading</h3>
<p>Text</p>
<button class="btn">More</button>
</div>
<div class="col-sm-3">
<img src="http://placehold.it/400x300" alt="" class="img-responsive">
<h3>Heading</h3>
<p>Text</p>
<button class="btn">More</button>
</div>
<div class="col-sm-3">
<img src="http://placehold.it/400x300" alt="" class="img-responsive">
<h3>Heading</h3>
<p>Text</p>
<button class="btn">More</button>
</div>
<div class="col-sm-3">
<img src="http://placehold.it/400x300" alt="" class="img-responsive">
<h3>Heading</h3>
<p>Text</p>
<button class="btn">More</button>
</div>
</div>

Answer 4

Just give your images same class and add height.
Trick: avoid of giving height with pixels because getting issue in small screen instead give height with rem or
percentage

Answer 5

It's very easy actually, use display grid and grid-auto-columns: 1fr.