[csswg-drafts] [css-images] object-fit values per axis (#9066)

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

== [css-images] object-fit values per axis ==
While playing with view transitions, I felt like we need some new object-fit values.

Let's say the old view of a transition is:

```
[Hello]
```

And the new view is:

```
[everybody in the world]
```

(for folks unfamiliar with view transitions, they're two images that cross-fade, while transitioning width and height from the 'old' values to the 'new')

The effect I want is the for text to be centred as it cross-fades, and clip content outside the bounds. I can achieve that today like this:

```css
::view-transition-old(the-text) {
  overflow: hidden;
  object-fit: contain;
}

::view-transition-new(the-text) {
  overflow: hidden;
  object-fit: cover;
}
```

The reason I use `contain` on the 'old' view, and `cover` on the 'new' view, is because the new view is wider than the old view.

If I want to run the transition the other way around, I'd need to swap `cover` and `contain`.

What it actually feels like I want to say is: Contain on the y-axis only. Allow it to overflow on the x-axis.

That rule works no matter what size the content is. It would also work when transitioning from a 4:3 thumbnail to a 16:9 image.

So, `contain-x` and `contain-y`?

(cc @noamr @khushalsagar)

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


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

Received on Friday, 14 July 2023 11:56:35 UTC