A more elegant and easier to use solution

[jensimmons]

The CSS Working Group is working on a solution to this problem.

The HTML for web developers will look like this:

<img src="dog.jpg" width="400" height="300">

The UA-stylesheets of all browsers will add this code:

img, video {
    aspect-ratio: attr(width) / attr(height);
} 

This will calculate an aspect ratio, based on the width & height attributes — before the image has loaded — and have that information available at the very beginning of layout calculation. The moment an image is told to be width: 100%, for example, the aspect ratio is used to calculate the height.

There is no need for a web developer to do anything else, or anything new (besides return to the habit of using width and height attributes in HTML for a performance gain). It'll just happen.

We are implementing this in Firefox as an experiment, in part to make sure such a solution will not break existing websites.

[scottjehl]

👍 Big fan of this proposal, particularly if the CSS ends up in the browser's UA stylesheet so that old and new sites gain aspect ratios on their images with little or no work.

[chriscoyier]

I'm into it. Seems like a fantastic idea.

I like blogging so I blogged it.

[JoshTumath]

This is such a great idea! Hopefully, this can help with the proposed HTML loading attribute, as well (whatwg/html#3752). The attribute is designed to prevent making a network request for an image or iframe until it is scrolled into view. However, Chrome's implementation still makes a small request for the first few bytes of the image to get its dimensions. If this rule is added to the UA stylesheet and the author has specified the width and height attributes, Chrome would not need to do its metadata prefetching.

Speaking of iframes, would it make sense to include iframe in this CSS rule? Websites that use iframes to embed videos or animated gifs from other websites like YouTube would be able to scale while maintaining the aspect ratio, too.

[scottjehl]

I agree. iframe would be nice, as would object.

[simevidas]

Is it safe to assume that the aspect ratio computed from the image’s width and height attributes will always be the same as the aspect ratio of the rendered image after it loads and is styled by the page’s CSS?

[nuxodin]

As much as I like that proposal:
If I don't make a memorial mistake, this will break the web.
Today, this will squeeze/deform the image, the height stays at 572px:

<div style="width:200px">
  <img width="960" height="572" src="image-960x572.jpg" style="width:100%">
</div>

https://jsfiddle.net/tpgn143f/4/

According to this proposal, the height will be calculated from the aspect ratio.

[michaelwhyte]

I am concerned about this idea. For years since we have been building responsive fluid web layouts declaring width and height attributes on "img" elements could be problematic when the actual size of an image as displayed on the page is basically unknown and fluid.

Unless the developer takes the time to set up their CSS correctly, images could become squished or stretched if the width and height attributes are present on the image tag. Plus, sometimes we want our images to be displayed at a different aspect ratio then actual aspect ratio of the image itself (with the help of object-fit). Finally, there is the "picture" element and art directing of images, sometimes we want a square-crop on mobile and landscape crop on desktop, these are two very different aspect ratios.

I guess I am saying many sites and developers have been omitting the width and height attribute on images for a while. We would now have to make sure everyone put them back in, and then it is not always appropriate to do so.

[Sora2455]

@michaelwhyte If I understand this correctly, this rule would have no effect on images without width and height attributes, leaving their behaviour unchanged.

[nuxodin]

@jayhostan True, it would be necessary to set the CSS height to auto.
So it would not break the web.

Also, it would not be possible to polyfill this without an additional custom-property --aspect-ratio or manually parsing the stylesheets.
https://github.com/nuxodin/intrinsicsize-polyfill

But yes, I see that the proposal has the big advantage that you don't need an additional attribute.
And above all, we have the long-awaited aspect-ratio for other things as well!

[yoavweiss]

@ojanvafai @loonybear @dvoytenko - Thoughts?

[yoavweiss]

Also, @kinu & @domfarolino for lazy loading and range request downloads.

[chrisg88]

Is attr() no longer experimental outside of pseudo content?

[fantasai]

The aspect ratio calculated from the width and height HTML attributes won't have any effect unless the author has explicitly set at least one of the width or height CSS properties to auto. Therefore the only case where this proposal can result in a change in rendering is if the author has both: a) set incorrect width/height values in the HTML and b) set one of the image's dimensions to auto in the CSS. Furthermore if that situation happens to be a Web-compat problem, we can change the priority so that the image's own aspect ratio wins over the declared one once it is loaded.

Is attr() no longer experimental outside of pseudo content?

If we decide to go down this route, the mapping will probably be handled at the CSS presentational hint layer (in C++) where presentational attribute-to-CSS mappings happen, rather than using CSS syntax in the UA style sheet directly; as far as I'm aware we still don't have implementations of attr() outside content. But the effect would be equivalent.

[ojanvafai]

The aspect ratio calculated from the width and height HTML attributes won't have any effect unless the author has explicitly set at least one of the width or height CSS properties to auto.

Can you explain this more? Why does it require the author to explicitly css the width/height CSS properties to auto to hit the issue?

Furthermore if that situation happens to be a Web-compat problem, we can change the priority so that the image's own aspect ratio wins over the declared one once it is loaded.

How would this work? It sounds like you're saying the aspect-ratio CSS property would not do anything to elements that have an intrinsic aspect ratio once loaded?

[ojanvafai]

Also, for others, here's the previous CSSWG discussion about this https://lists.w3.org/Archives/Public/www-style/2019Mar/0015.html and #4 (comment) seems like relevant data depending on the explicitly set to auto thing.