title: Img's max-height not respecting parent's dimensions
body: <p>I have an <code>img</code> element inside a liquid <code>div</code>. That img has its <code>max-height</code> set to 100%. So, if the image is taller than the div, it should be rendered as tall as the div.</p>
  
  <p>The original size of the .png file is 200x200. In my browser, the div shows as 284x123. Therefore, the img should be rendered at 123x123, to keep its aspect ratio.</p>
  
  <p>However, the img is breaking the div's bounds and still shows as 200x200.
  I can't seem to figure why this is happening.</p>
  
  <p>This is happening on Chrome, but not on Firefox (last time I tried).</p>
  
  <p>You can see the current state <a href="http://paginas.fe.up.pt/~ei07171/test/" rel="noreferrer">here</a> (<a href="http://paginas.fe.up.pt/~ei07171/test/" rel="noreferrer">http://paginas.fe.up.pt/~ei07171/test/</a>).
  If you hover over the <strong>left</strong> side of the picture, you'll see a grey arrow, the .png that i'm talking about. The arrow on the right side is a SVG file and works correctly.</p>
  
  <p><strong>Edit:</strong> I've created a separate jsfiddle (<a href="http://jsfiddle.net/dcastro/3Ygwp/1/" rel="noreferrer">http://jsfiddle.net/dcastro/3Ygwp/1/</a>), where the img's max-height seems to work correctly.. I can't find what on my project is causing it not to work.</p>