title: Limit the height of a responsive image with css
body: <p>My end goal is to have a fluid <code>&lt;img&gt;</code> that won't expand past an explicitly set height of a parent/grandparent element using only css. </p>
  
  <p>Currently I'm doing this with a normal (<code>max-width:100; height:auto;</code>) 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 <code>max-width</code> on the image's container element. Pretty simple, but I'd love to be able to do it without javascript.</p>
  
  <p><code>height:100%; width:auto;</code> 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. </p>
  
  <p>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.</p>