CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive
Emre
Emre

Reputation: 53

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

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: enter image description here

Upvotes: 0

Views: 2624

Answers (5)

Alex Garz&#243;n
Alex Garz&#243;n

Reputation: 47

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

Upvotes: 0

WizardCoder
WizardCoder

Reputation: 3461

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

Upvotes: 1

djhru
djhru

Reputation: 336

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

Upvotes: 0

user3589620
user3589620

Reputation:

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>

Upvotes: 0

Bhuwan
Bhuwan

Reputation: 16855

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>

Upvotes: 0

Related Questions