Maintain child proportions when parent is scaled

[Alex Pi]

I have a parent element that is animating its shape from landscape to portrait and vice versa.
The parent element contains an image, which as its parent changes shape, is getting distorted.
I want the image to maintain correct proportions, staying in the middle of the parent while being cutoff at the edges for example.

This is similar to how an image maintains proportions using object-fit, but I can’t use that here because the parent is animated using transforms to avoid layout thrashing.

A simplified example of my problem => https://codepen.io/alexpi/pen/wbeXVX

[Paulie_D]

The only way I am aware of is to reverse scale the child at the same rate as the parent is scaled.

[Alex Pi]

I tried to do what Paulie suggested, and I found this article by Google describing the process. I updated my example Pen (https://codepen.io/alexpi/pen/wbeXVX?editors=1111), but I can’t find a way for the image to fill the parent figure.

[Author]

Posts