Skip to main content

Forums

This topic contains 2 replies, has 2 voices, and was last updated by  Alex Pi 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #288059

    Alex Pi
    Participant

    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

    #288080

    Paulie_D
    Moderator

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

    #288095

    Alex Pi
    Participant

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star