71

My end goal is to have a fluid <img> that won't expand past an explicitly set height of a parent/grandparent element using only css.

Currently I'm doing this with a normal (max-width:100; height:auto;) fluid image and javascript by reading the height/width attributes from the img tag, calculating the aspect ratio, calculating the correct width of the image at the desired height restriction, and applying that width as a max-width on the image's container element. Pretty simple, but I'd love to be able to do it without javascript.

height:100%; width:auto; doesn't work the same as its transverse, and I've made some attempts with Unc Dave's ol' padded box and absolute positioning that function but require knowing the aspect ratio of the image beforehand and therefore cannot be applied across images that have different proportions. So the final requirement is the css must be proportion agnostic.

I know, I know, the answer to this question is probably sitting next to the unicorn farm, but I thought I'd throw it out there anyways.

4
  • 1
    I'm having a hard time understanding why max-height: wouldn't work. Could you provide example HTML + CSS + images which demonstrate the problem?
    – KatieK
    Jan 17, 2013 at 21:37
  • Doesn't work, check this fiddle: jsfiddle.net/Z9yFJ/4. You know, honestly I can't remember why I needed this.
    – RobW
    Jan 17, 2013 at 23:01
  • None of the solutions work to crop an image (limit its size in both width and height while maintaining aspect ratio). Some help is at https://uploadcare.com/blog/how-to-crop-an-image-in-css/ Aug 7 at 17:22
  • The solution I found was to use object-fit:cover on the image, and width, overflow:hidden, and max-height on a containing div. Another solution is to use background-image, background-size. and background-position for precision scaling and cropping on the image itself. Aug 7 at 18:35

3 Answers 3

96

The trick is to add both max-height: 100%; and max-width: 100%; to .container img. Example CSS:

.container {
  width: 300px;
  border: dashed blue 1px;
}

.container img {
  max-height: 100%;
  max-width: 100%;
}

In this way, you can vary the specified width of .container in whatever way you want (200px or 10% for example), and the image will be no larger than its natural dimensions. (You could specify pixels instead of 100% if you didn't want to rely on the natural size of the image.)

Here's the whole fiddle: http://jsfiddle.net/KatieK/Su28P/1/

3
  • 3
    This works well as long as the image is taller than the container. Thanks.
    – RobW
    Jan 18, 2013 at 17:29
  • This method is the best, but I think it is better to specify the 'max-width' on .container. and add 'responsive' class to your container div in htm (<div class="mycontainer responsive">). That way it won't expand past an explicitly set height but it will still be responsive below that size.
    – amchugh89
    Oct 24, 2015 at 9:50
  • 9
    @amchugh89 and where does this magical 'responsive' class come from ?? Apr 6, 2016 at 13:35
6

I set the below 3 styles to my img tag

max-height: 500px;
height: 70%;
width: auto;

What it does that for desktop screen img doesn't grow beyond 500px but for small mobile screens, it will shrink to 70% of the outer container. Works like a charm.

It also works width property.

-10

You can use inline styling to limit the height:

<img src="" class="img-responsive" alt="" style="max-height: 400px;">
2
  • 2
    not only does this not answer the OP's questin (i.e. "with CSS"), inline styling is a bad thing(tm) because it mixes display logic with content.
    – Ch4ni
    Sep 8, 2015 at 1:00
  • 4
    Also, there is no difference between inline styles and styles defined anywhere else in a document when it comes to this layout question.
    – RobW
    Sep 23, 2015 at 19:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.