title: Forcing aspect ratio with CSS doesn't work on Safari
body: <p>The following code works well in Firefox and Chrome, but doesn't in <strong>Safari</strong> (tested on Mac and iPad): <a href="http://jsfiddle.net/eFd87/" rel="noreferrer">http://jsfiddle.net/eFd87/</a>.</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="content"&gt;
          &lt;img src="http://farm3.staticflickr.com/2783/4106818782_cc6610db2c.jpg"&gt;        
      &lt;/div&gt;
  &lt;/div&gt;
  
  #wrapper {
      position: relative;
      padding-bottom: 33.33%; /* Set ratio here */
      height: 0;
  }
  #content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: green;
      text-align: center;
  }
  #content img {
      max-height: 100%;
  }​
  </code></pre>
  
  <p>The goal is to have a wrapper div keep a fixed aspect ratio (<strong>in my web application it is a carousel</strong>), and the image inside it resize to fit in the div (and center).</p>
  
  <p>On Safari the image doesn't display because of the <code>height: 0</code> (which will give a height of 0 for the img). With <code>height: 100%</code> the image display but doesn't fit the div (it overflows).</p>
  
  <p>Do you see any solution for this problem? I've been on this for hours...</p>