title: Chrome Squishing <img> on browser height resize
body: <p>This is a weird one!</p>
  
  <p>Working on a cross-browser super simple UI that mimics google docs presentation editor. The issue I've found is for the right portion of the UI, which contains a large slide/image preview and an accompanying 'notes' drawer. </p>
  
  <p>My basic html skeleton:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;div class="preview"&gt;
          &lt;img src="http://lorempixel.com/800/600/business" /&gt;        
      &lt;/div&gt;
  
      &lt;div class="otherthing"&gt;
          This is another UI thing, 20% height    
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS to handle fluid scaling with browser resize:</p>
  
  <pre><code>body, html{
      width:100%;
      height:100%;
  }
  
  *{
      box-sizing:content-box; /* ie */
      box-sizing:border-box; /* all others */
      -moz-box-sizing:border-box; /* except firefox */
  }
  
  .container{
      width:100%;
      height:100%;
      position:relative;
  }
  
  .preview{
      width:100%;
      height:80%;
      position:relative;
      text-align:center;
  }
  
  .preview img{
      height:90%;
      width:auto;    
  }
  
  .otherthing{
      width:100%;
      height:20%;
      background:#369;
  }
  </code></pre>
  
  <p>This works in Firefox, Safari, Opera, and IE back to 8! However, in Chrome, if you resize the browser height (just height), the &lt;img&gt; tag gets squished until the browser width is ALSO adjusted. If you resize both width and height, it scales completely fine.</p>
  
  <p>Here's the fiddle: <a href="http://jsfiddle.net/zb5ek/" rel="nofollow">http://jsfiddle.net/zb5ek/</a></p>
  
  <p>Anybody have any idea what is going on/what I can do to fix this? It's a dark day when you discover a Chrome-only bug :)</p>