[css-images] object-fit values per axis

[jakearchibald]

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:

::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)

[khushalsagar]

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

I think what you actually want to say is "scale the image to match y-axis". Because the button is growing horizontally with more text, you want to it clip or letterbox in that direction. So if we match one axis, the scaling in the other direction is decided by the image's aspect ratio. And it will contain or cover depending on the aspect ratio.

[jakearchibald]

I think we're saying the same thing. contain will scale the image as small as it can be, while matching either the horizontal or vertical dimension. I'm looking for a version where I can specify which dimension, the horizontal or the vertical.