Re: [csswg-drafts] [css-grid][css-sizing] Aspect Ratio

[Issue 4](https://drafts.csswg.org/css-sizing-4/#issue-08ed422b) in the spec asks:

> ```css
> aspect-ratio: attr(width px) / attr(height px);
> ```
[...]
> Can we just slip this `aspect-ratio` rule into the UA default style sheet for images, so that they have an aspect ratio while they load? This would avoid the need for extra reflows after loading.

This is an interesting idea for how to solve the same problem that [the proposed `intrinsicsize` attribute](https://github.com/ojanvafai/intrinsicsize-attribute) (on `<img>` and `<video>`) is attempting to solve. `intrinsicsize` solves it at a different level, by setting/overriding the image's intrinsic size (or aspect ratio), rather than establishing a default extrinsic ratio for it.

So I guess first of all – I just want to cc some `intrinsicsize` people who have though through this problem – @tigt @ojanvafi @loonybear 

Second – I have two questions about how the proposed rule may break existing content.

## ①

Specifying `width` and `height` as percentages was valid in HTML 4.01. Is there existing content that will break if those percentages are interpreted as px (I guess?) and fed into this rule?

## ②

Currently, in order to achieve fluid sizing *without* aspect-ratio distortion on an image with `width`/`height`, you have to "undo" the extrinsic size set in the cross axis by setting it to `auto`:

```html
<img width="300" height="200" style="width: 100%; height: auto;" />
<!-- without `height: auto` this would be locked to a height of 200px, even as the width was fluid/variable -->
```

I suppose this new default would obviate that: a UA default `aspect-ratio` would trump the `height=""` presentational hint, so we could just write

```html
<img width="300" height="200" style="width: 100%;" />
```

and get a 3:2 fluid img (that was 3:2 even before the image loaded and an intrinsic size was known). Yay! But... is there any existing web content that relies on or expects the previous behavior? Maybe, uh, spacer gifs?


-- 
GitHub Notification of comment by eeeps
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/333#issuecomment-438092951 using your GitHub account

Received on Tuesday, 13 November 2018 01:20:19 UTC