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