CODEWITHSUNDEEP
htmlcss
John Smithe
John Smithe

Reputation: 45

How to make an image responsive height?

I have this sample:

link

CODE HTML:

<div class="row">
    <div class="col-md-4">
        <img src="http://rochester.motorcitynewengland.com/img/cars/kia-forte.jpg" alt="2015 Kia Forte" title="2015 Kia Forte" class="img-responsive">
    </div>  

    <div class="col-md-4">
        <img src="http://rochester.motorcitynewengland.com/img/cars/chrysler-300C-min.jpg" alt="2015 Kia Forte" title="2015 Kia Forte" class="img-responsive">
    </div>  


    <div class="col-md-4">
        <img src="http://rochester.motorcitynewengland.com/img/cars/dodge-dart-min.jpg" alt="2015 Kia Forte" title="2015 Kia Forte" class="img-responsive">
    </div>  
</div>

CODE CSS:

img{
    max-height: 355px;
    margin-bottom: 0.5em;
    text-align:center;
}

The problem is that if you resize the window ... the first image is taller than the other two. How can I always keep the same height to all 3 pictures?but the images to be responsive both height and width.

Thanks in advance!

Upvotes: 1

Views: 9846

Answers (4)

Tijs De Belie
Tijs De Belie

Reputation: 1

Put each image in a div class, and make in css a max-height:"...px" ans set width to auto

Upvotes: 0

Riccardo De Contardi
Riccardo De Contardi

Reputation: 2148

One thing you could do to mantain the height is to set your images as fluid, but mantain their aspect ratio; there are several tutorials about how to do that, e.g. http://www.goldenapplewebdesign.com/responsive-aspect-ratios-with-pure-css/ or https://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

the cons is that the images will get cropped if their aspect ratio is not 16:9

Upvotes: 1

Chiller
Chiller

Reputation: 9738

you can use background image for each div instead 

<div class="row">
  <div class="col-md-4 img1 img">
  </div>  

  <div class="col-md-4 img2 img">
  </div>  

  <div class="col-md-4 img3 img">
  </div>  

</div>

CSS:

.img1{
  background:url(http://rochester.motorcitynewengland.com/img/cars/kia-forte.jpg);

}
.img2{
  background:url(http://rochester.motorcitynewengland.com/img/cars/chrysler-300C-min.jpg);

}
.img3{
  background:url(http://rochester.motorcitynewengland.com/img/cars/dodge-dart-min.jpg);

}

.img{
    height: 355px;
    background-size:cover;
    background-position:center;

}

working demo

Upvotes: 0

Dhaval Chaudhary
Dhaval Chaudhary

Reputation: 5835

So what i would suggest is to make 3 css class for 3 div.

<div class="col-md-4 xyz1></div>
<div class="col-md-4 xyz2"></div>
<div class="col-md-4 xyz3"></div>

in css you can set background of the div to be you image.

.xyz1{
 background : url(yourUrl);
 background-size: contain;
 background-repeat: no-repeat;
}

and so on..

Upvotes: 0

Related Questions