Forcing aspect ratio with CSS doesn't work on Safari

Question

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...

Answer 1

If you are not worried about old browsers you could use the object-fit property

The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.

Or if you need to support old browsers there is a neat Netflix trick discussed here:

Responsive Images

Answer 2

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

See also:

• WebKit changelog including the fix
• WebKit changeset where the fix is implemented