Explicit image aspect ratio from CMS items

Hi everyone,

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.

My guess is I’m applying something to the wrong container?

Any help or direction is appreciated. I dug around the forums but couldn’t find a clear answer in my case.


Read-Only: https://preview.webflow.com/preview/playground-0cfa9e?utm_source=playground-0cfa9e&preview=820a43d5bcad6ef7032eda665b486a75

Published: https://playground-0cfa9e.webflow.io/

I would create A Div for the image and set the image as a background of that Div

Thank you. When I do that, how do I then set the image to have that 16:9 ratio?

Hi

Sorry for the late reply. add size measurements to the div block, something like those in the attach image

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.

Set the background image to “cover”.

You need to prepare an image with this aspect ratio

Ohh I see.

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?

If you set the Div’s background images to “cover” then the images will crop as the aspect ratio of the div that contains the image. Hope it help you

1 Like

Solved it! Thanks @shokoaviv.

For anyone who comes across this in the future:

  1. Add a Link Block
  2. Add a 56.25% bottom padding to the Link Block spacing (this will lock in your 16:9 aspect ratio)
  3. Under Style, click the + to add a background image
  4. Select ‘Cover’ under Size
  5. Select the center dot under Position
  6. 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.

3 Likes