Fixed Aspect Ratio CMS Image

Design help General
1

Hi,

So I’m working on a collection list and I want to be able to choose the aspect ratio of the image regardless of the source image aspect ratio. So it cuts off a part of the sides if it’s too big, as shown in the image below. For example, this makes it so I can get a 1:1 image in the thumbnail and the same image 3:2 in the article.

I have fiddled with it a lot and but can’t get the scaling to work properly. It is possible?
The aspect ratio of the Cayo Espanto image is 2:1, while the other images are 3:2.

Read-only link

webflow

2

If you want to keep a specific aspect ratio I believe you want to add a percentage value to the top padding. For 4:3 I think you would set the top padding to 75%. You can read more here: How To - Aspect Ratio / Height Equal to Width

Hopefully this helps, although in the read only link everything looks pretty good.

1 Like
3

Thanks! That seems to fix it, I didn’t know about the padding trick. :slightly_smiling_face:

1 Like
4

Awesome! Glad it helped! Yes… it’s pretty cool and useful! :wink:

1 Like
5

Sorry to bring this up again, but I’m not sure how to resolve this.

Whenever I set my top-padding on my blog post images to 56.25% (16:9 ratio), it just pushes my image down. Am I setting it in the wrong location?

Here is my site Read-Only: https://preview.webflow.com/preview/gregs-blog-a8a286?utm_source=gregs-blog-a8a286&preview=e8c7bb37a7dcb1fda6905f902849131a