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

Talca

Does this help? #1311568 – Ducks

Matthieu, you might want to look again at the linked page. My answer presents two approaches, one of which is pure CSS and both of which are javascript-free. – Zelaya

Look, best thing to do is to calculate width/height dynamically on JS because it's a hell of a headache to make it work on Safari, mainly when you have a dynamic height because of a navigation bar, etc. Ex, for aspect ratio of 9/16 (mobile phones) do: height: window.innerHeight; width: ${${window.innerHeight * 9 / 16}px} – Sulky

Answer 1

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

Bonin

Hi, is there any fix available for boxes(div elements) that have set aspect ratio in safari and its height is not dependent on its content but rather on aspect ratio? Working for chrome but not in safari – Incandescent

Safari is now at version 17+ and aspect-ratio is still missing!!! locked behind a dev flag. This is frustrating. -webkit-aspect-ratio: does not seem to work either. T_T This is a live or die feature for responsive-ui design. Frustrating. – Braggart

Answer 2

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

Different

Answer 3

This isn't exactly a great answer to your question but it's an answer nonetheless.

I very much doubt it is possible to do this using a CSS only approach because as far as I know (I'm happy to be corrected on this) there is no way to perform calculations based on the of another CSS property. So width: height * 1.3; for example isn't possible. You can't use % either because that's a percentage of the parent, not of its self.

The way you are currently looking at involving bottom padding won't work reliably either, it will work on your screen however if someone else screen has a different aspect ratio or they have lots of tool bars changing the aspect ratio of the browser window then the aspect ratio will be wrong. % is of the parent which unless you can guarantee the size of you cannot really use.

So far as I can tell your only option on this is JavaScript. The most obvious and my recommendation would be jQuery or some other framework to calculate and explicitly set height based on width. Don't forget to listen for browser window resizing though.

Ducks

Answer 4

Width 100% and Height auto worked for me on Safari. Initially, i was using 100% for both w and h which works fine on FF but failed on Safari.

.stretch {
  width: 100%;
  height: auto;
}

HTML:

<div>
    <img src="images/someimg.jpg" class="stretch" alt="" />
</div>

And oh, I've used Bootstrap which adds this to all elements.

*, *:before, *:after {
  -moz-box-sizing: border-box;
}

Putput