W3C home > Mailing lists > Public > public-css-archive@w3.org > September 2020

[csswg-drafts] [css-sizing-4][css-contain] Clarify on specifying aspect-ratio and contain:size on replaced elements (#5550)

From: Ting-Yu Lin via GitHub <sysbot+gh@w3.org>
Date: Thu, 24 Sep 2020 22:45:17 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-708519027-1600987516-sysbot+gh@w3.org>
aethanyc has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-sizing-4][css-contain] Clarify on specifying aspect-ratio and contain:size on replaced elements ==
Per [3.1. Size Containment](https://drafts.csswg.org/css-contain/#containment-size), 
> Replaced elements must be treated as having an intrinsic width and height of 0.

I read above as the replaced element should be treated as having no intrinsic aspect ratio as well. So if a replaced element has both `aspect-ratio` and `contain:size`, what size should it be? An example:

```
<img src="https://placehold.it/300x100" style="width: 100px; aspect-ratio: 1/1; contain:size">
```

Here a link to the above example. https://jsfiddle.net/tL3xh6qo/2/  (Currently, both Firefox and Google Chrome render the example as 0x0.)

I would think the image size should be 100x100, not 0x0, because `contain:size` affects only intrinsic aspect ratio, and `aspect-ratio` property provides a preferred aspect-ratio, which should be used to determine the size.

CC @cbiesinger, @fantasai, @BorisChiou, @emilio 



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5550 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 24 September 2020 22:45:18 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:17 UTC