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.
> 
> img:natural-state(aspect-ratio <= 1/2) {
>   object-fit: contain;
> }

I agree, range is a better convention to follow here.

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

I like this idea. Some other possible options if we wanted to open it up to include ability to query width/height could be:

- `:intrinsic()`
- `:natural()`

### Examples:
```
img:natural(width <= 100px) {
}

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

```
img:intrinsic(width <= 100px) {}

img:intrinsic(aspect-ratio > 2) {
  object-fit: cover;
}
```
Else if we only want to keep it in scope of aspect ratio, `:aspect-ratio()` is the most straightforward, but I could see benefit of a more universal selector.

> We don't want a situation where the image metadata can be inferred through CSS when HTML insists it not be visible to authors.

Definitely a security risk we don't want to create with this. Any implementation needs to enforce the same-origin/CORS restrictions to avoid leaking metadata



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


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

Received on Wednesday, 2 July 2025 17:18:27 UTC