title: Safari css height: auto; and height: 100%; stretches image. Does not happen in firefox or chrome
body: <p>I have square images in a grid. The css says the width of each is 25%. The height should be set to auto. What you should get is a row of 4 straight across. What I get instead is width: 25%; height: max-image size</p>
  
  <p><a href="http://jsfiddle.net/9zocbot2/" rel="nofollow">This fiddle might explain what I mean</a> </p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;img src="image.jpg"&gt;
      &lt;img src="image.jpg"&gt;
      &lt;img src="image.jpg"&gt;
      &lt;img src="image.jpg"&gt;
  &lt;/div&gt;
  
  #container img {width: 25%; height: auto;}
  </code></pre>
  
  <p>In firefox and chrome it looks fine. I can't figure out what the issue is in safari</p>