title: Responsive image with max height
body: <p>I would like, using CSS only, to have an image stretch to the max width of a container div, keeping aspect ratio, without using background images. However, if the height of the image exceeds X then it should be limited by that. The following doesn't cause the image to go 100%. If I set that then it becomes stretched if the height exceeds 200px.</p>
  
  <pre><code>.container {
     width: 200px;    
     position: relative;
  }
  img {
    position: relative;
    max-width: 100%;
    max-height: 200px;
  }
  
  &lt;div class="container"&gt;&lt;img src=""&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here's a fiddle to play with: <a href="http://jsfiddle.net/cyberwombat/agfy1cfm/4/" rel="nofollow">http://jsfiddle.net/cyberwombat/agfy1cfm/4/</a></p>