Forcing aspect ratio with CSS doesn't work on Safari

The following code works well in Firefox and Chrome, but doesn't in Safari (tested on Mac and iPad): http://jsfiddle.net/eFd87/.

<div id="wrapper">
    <div id="content">
        <img src="http://farm3.staticflickr.com/2783/4106818782_cc6610db2c.jpg">        
    </div>
</div>

#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%;
}

The goal is to have a wrapper div keep a fixed aspect ratio (in my web application it is a carousel), and the image inside it resize to fit in the div (and center).

On Safari the image doesn't display because of the height: 0 (which will give a height of 0 for the img). With height: 100% the image display but doesn't fit the div (it overflows).

Do you see any solution for this problem? I've been on this for hours...

Solution

As announced during WWDC20 at What's new for web developers, starting from Safari 13.1, WebKit now calculates the image aspect ratio from the width and height values of the image element. This means that the issue you have faced is fixed on the latest version of the browser.

On the next video you can see a test ran at my machine where Chrome and Safari behaves the same: https://recordit.co/GULXcMpfPW