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

>    What syntax do we want?

I think the most straightforward and effective approach would be something like you mentioned with the ability to select **based on a min or max**:
> ```
> :aspect-ratio( [ [ min | max ]? && <ratio> ] | portrait | landscape)
> ```

>    Do we want it to reflect the aspect ratio described in the markup, or only the actual aspect ratio of the replaced content? (The former is probably more useful.)

I think basing it on the actual natural dimensions of the content will be the most robust. Natural ratio never lies, even if the width/height attributes aren’t set.

Do we think this is sufficient enough to fulfill the need and straightforward enough that it fits into the already existing ecosystem? 

Example in production:
```
/* Default: crop to fill the box */
img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

/* If the intrinsic w/h ≤ 1/2 (skinny), show the whole image */
img:aspect-ratio(max 1/2) {
  object-fit: contain;
}
```

-- 
GitHub Notification of comment by 7devv
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12197#issuecomment-3021055094 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 22:41:42 UTC