Re: [csswg-drafts] [Proposal] Support styling based on an element’s intrinsic aspect ratio (or size) (#12197)

I would prefer reusing the [range syntax](https://drafts.csswg.org/mediaqueries-5/#mq-range-context) if possible. E.g.

```css
img:natural-state(aspect-ratio <= 1/2) {
  object-fit: contain;
}
```

Also `:natural-state(aspect-ratio > 1/2)`, `:natural-state(1/2 <= aspect-ratio <= 2)`, `:natural-state(aspect-ratio)`, etc.

And we could also have other natural state queries, like `:natural-state(width >= 100px)` for the natural width, or analogous for the natural height.

BTW this is reminding me of #6402, where scroll queries got a `scroll-state()` function.

But I'm not strongly arguing for `:natural-state()`, I mostly think this should use `<=`, `<`, `>`, `>=`, `=` in some way, which is much more clear than a min-/max- prefix notation.

> I think basing it on the actual natural dimensions of the content will be the most robust

Agree, it should check the [natural aspect ratio](https://drafts.csswg.org/css-images-3/#natural-aspect-ratio). The attributes just set presentational hints, and it's probably better to not change that. And this is a selector so it can't depend on styles.

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 30 June 2025 23:17:32 UTC