Limit the height of a responsive image with css

css, responsive-design

Solution

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/

Problem

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.

Original source