69

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
RobW
  • 10,184
  • 4
  • 41
  • 40
  • 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 '13 at 21:37
  • Doesn't work, check this fiddle: http://jsfiddle.net/Z9yFJ/4/. You know, honestly I can't remember why I needed this. – RobW Jan 17 '13 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/` – David Spector Aug 07 '23 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. – David Spector Aug 07 '23 at 18:35

3 Answers3

94

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/

KatieK
  • 13,586
  • 17
  • 76
  • 90
  • 3
    This works well as long as the image is taller than the container. Thanks. – RobW Jan 18 '13 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 (
    ). That way it won't expand past an explicitly set height but it will still be responsive below that size.
     – amchugh89 Oct 24 '15 at 09:50
  • 8
    @amchugh89 and where does this magical 'responsive' class come from ?? – Andy Lorenz Apr 06 '16 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.

GorvGoyl
  • 42,508
  • 29
  • 229
  • 225
-10

You can use inline styling to limit the height: 

<img src="" class="img-responsive" alt="" style="max-height: 400px;">
William
  • 45
  • 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 08 '15 at 01: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 '15 at 19:39