Streaming live at 10am (PST)

Fixed Aspect Ratio CMS Image


#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: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

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


#3

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


#4

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