Transforming shape without distorting image inside

I thought I had figured this out, but it turns out I was wrong.

I had been trying to transform the shape of this image (rectangle to square) without distorting the image inside it. In effect I wanted to show a smaller area of the image.

Instead it turns out I am squishing the image (very technical term) which I found out by substituting a clearer image. This is what is happening now:

Monosnap screencast 2022-12-21 21-09-50

Is there a way to transform the shape without distorting the image inside it?

Right now this is an image inside a div block. I am applying the transformation to the div block.

It did occur to me to try setting the background of the div block to the image rather than having an image inside it. However, this is a collection list and I cannot seem to draw the background image from the CMS (which seemed strange but I didn’t get the option).

Here is my public share link

You should be able to do this by just setting the background image - it’s located in the attached screenshot

You’ll need to set pre-set dimensions on the div that you’re setting the bg image on

Thank you. That allowed me to pull the background image from the CMS.

Unfortunately, I doesn’t seem to change the behaviour. The image still gets distorted the same way.

Is it possible the Scale animation just always distorts anything contained in the object being scaled?

Instead of using Scale try just changing the dimensions of the div that wraps the image - if you have the background image set to cover it shouldn’t distort the image but instead adjust proportions

Thank you, Franz. That worked — mostly.

One small detail: the image moves down as the “mask” gets smaller. Ideally I would like it to look like the image stays in the same place while the “mask” appears to zoom into the centre.

Would that be possible?

It might be very difficult. I am centring the image wrapper vertically within its parent as it gets smaller. Even if I “move” the image up at the same time, I am not sure I could make it appear to stay still.

Monosnap screencast 2022-12-23 23-19-54

Ok, I tried moving the image up a bit while the size is adjusted. It’s not perfect (I am moving it a bit too far up) but I think it looks a little better:

Monosnap screencast 2022-12-24 00-47-01

Thanks so much for your help!

1 Like