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

7devv has just created a new issue for https://github.com/w3c/csswg-drafts:

== [Proposal] Support styling based on an element’s intrinsic aspect ratio (or size) ==
In many real-world layouts, especially in e-commerce and gallery systems- images vary significantly in their intrinsic dimensions. For example, some product images are tall and narrow, while others (like room scenes or banners) are wide or square. Depending on the shape, different styling is appropriate. 

A common case is controlling `object-fit` behavior. Wide or square images often look good with `object-fit: cover`, while narrow or tall images can get awkwardly cropped and instead need `object-fit: contain`.

There’s currently no way in CSS (that I'm aware of) to style an element differently based on its intrinsic aspect ratio (natural width and height). This makes it difficult to build responsive, robust layouts without relying on JavaScript to measure images and inject classes conditionally.

**Here's a codepen to help visualize:** [Product Grid Demo](https://codepen.io/7devv/pen/raaPojX)

### What doesn't work:

- `@media (aspect-ratio)` only applies to the **viewport**, not the element
- `aspect-ratio` as a property only defines a preferred aspect ratio; it doesn’t expose the **intrinsic** ratio
- Container queries work based on the parent/container size, not the intrinsic size of the element
- `:has()` and other selectors can’t introspect natural dimensions

### Why this matters:

Being able to style based on intrinsic aspect ratio would allow developers to handle layout logic that depends on the content shape, without using JavaScript. It's a purely presentational concern that feels like it should be solvable with CSS, but currently isn't.

I’m not sure what the right implementation path is (e.g. pseudo-class, query, or something else), but would like to open the conversation to see if this kind of feature is feasible or already being/been explored. If there is a way to do this without conditionally applying classes with JS and applying style overrides, please enlighten me, I am very curious about this!

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


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

Received on Thursday, 15 May 2025 01:49:43 UTC