New to Webflow, and really digging it, but still getting the swing of things.
I’m running into a problem where I’m trying to force a 16:9 image aspect ratio on images coming from a blog post collection, no matter what the original ratio of the image was. I’m attempting to recreate this page that I made on another platform:
My issue is that my images are coming in around 3:2 and not 16:9. From what I can tell, I should be using the padding-top or padding-bottom trick to lock in 52.65%, but it’s not working as expected.
Thank you @shokoaviv. I’m at a complete loss.
Adding numeric values there did nothing to change my aspect ratio here. The image appears zoomed-in in the div block.
What should I do if images in the CMS are different aspect ratios? For example some images are 1:1, but I want them to crop to 16:9 in the collection list view?
Add a 56.25% bottom padding to the Link Block spacing (this will lock in your 16:9 aspect ratio)
Under Style, click the + to add a background image
Select ‘Cover’ under Size
Select the center dot under Position
Under Element Settings, select Get BG Image from [collection] and select your image field from your collection
Doing all of this will ensure the image loads from the collection field and gets locked into a 16:9 aspect ratio. I struggled to get my head wrapped around this because I didn’t realize I had to set a background image before then setting its size to cover.
