How to auto "crop" CMS collection list images (16:9 aspect ratio example)

[Siton_Systems (Ezra Siton)]

** Long scroll but less than 1 min to implement.

“The Problem”
You want to upload difference size images and always keep the aspect ratio of 16:9 (Or any other aspect ratios).

Without any styles this is the result “broken layout”:

End result:

Solution - by “images” CSS trick (cropping-images-object-fit)

Why to use images? (And not bg)
1. Faster loading (Support webflow responsive image) feature, Better 2. SEO(And better Image SEO), Improve 3. Accessibility (Remember to add image alts). And last, more valid code.

How to:

1. Add extra div wrapper for the image
   

---

2. Set wrapper position to relative and padding-top to 56.25%:

Why 56.25% read her How TO - Aspect Ratio - w3schools

/* usefull aspect ratios */
1:1     |    100% ==> SQUARE
16:9    |    56.25%
4:3     |    75%
3:2     |    66.66%
8:5     |    62.5%

---

3. Add class for the image and set this values:

• position: absolute; webflow position absolute docs
• width: 100%;
• height:100%;
• top: 0, bottom:0, right:0, left:0

Middle result:
The “vertical image” squeeze (Because we set the height and width to 100%).

fit

Change image fit to cover

Object-fit support | Webflow Features

Extra setting if you want:

Extra reading:

How To Scale and Crop Images with CSS object-fit | DigitalOcean

• object-fit | CSS-Tricks - CSS-Tricks

Result:

**The same idea could work with background images (And cover background).

---

Related tutorial:

2 Ways to Create Aspect Ratios in Webflow

[Siton_Systems (Ezra Siton)]

If you want to use “img” trick above for regular flexbox grid (“not CMS”). Do not add padding-bottom: 56.25% For the col himself (Create extra div/wrapper):

[PeterDimitrov (Webflow Expert Partner)]

Thanks for sharing @Siton_Systems

[Eddy]

You made my day with this technique, thank you so much for sharing !

[kaitlynb]

Thank you so much for sharing - that was so simple and easy to follow!

[Klaus_Dyba]

Thank you so much! Is this possible with a lightbox gallery? Somehow i cant get it to work.

Regards
Klaus

[Jonathan_Guzman]

Happy for those of you who worked this out. Unfortunately, trying to get this to work together with a collection inside of a grid is headache inducing. I don’t even know where to begin trying to figure out what’s going wrong with my many attempts.

[Siton_Systems (Ezra Siton)]

@Jonathan_Guzman

collection inside of a grid

No difference related to GRID VS Flexbox.

Start point - collection list display grid

wrapper div styles:

image styles:

done:

[martinreboux (Martin)]

Trying to get it work on a flex box added within a collection but sadly it looks like it’s not working

[Siton_Systems (Ezra Siton)]

@martinreboux

sadly it looks like it’s not working

Add live URL + Read only link (If you follow the steps it should work).

[martinreboux (Martin)]

Thanks !
I followed your guidelines but I surely miss something.
I have concerns about the fact I am using a lightbox inside a collection list but not on a collection page…

read-only: https://preview.webflow.com/preview/mooqtrees?utm_medium=preview_link&utm_source=designer&utm_content=mooqtrees&preview=8a6379e43e5debee1a6b2523ac2c1969&pageId=5eaad83a52d8cd68f99f2fbc&mode=preview
live site page: https://mooqtrees.webflow.io/presse

[martinreboux (Martin)]

Any idea mate ? Did you get the chance to have a look at this ?

[benfig (Ben Figueiredo)]

I am not able to get it to work either… Followed all the steps but everything just disappears…
Images inside a collection list set to grid.

Read-Only link

[Siton_Systems (Ezra Siton)]

Please Add a screenshot of the area you want to fix.

@ benfig
In general, this trick is for images (This is also the title of the guide).
Your layout is more “a card with content”.

Try this (The content inside should be in position absolute):

[martinreboux (Martin)]

This is this area

[martinreboux (Martin)]

This issue I have is the image is not relative to the wrapper as it should be but the body…
Should be simple to solve but don’t find the key sadly…

[richtrow (Rich Trowbridge)]

I had the same problem and here’s how I fixed it:
Place the lightbox AND its image inside of the new DIV-WRAPPER.
That corrects the relative/absolute positioning issue.
Create the image class as directed.

(I imagine this would apply to a layout using a link-block too but haven’t tested it)

Now works as advertised.

[martinreboux (Martin)]

Hi,
Just getting the chance to see your post.
How’s configured the new wrapper ? Tried your solution but still don’t shows as expected…

[Ruthy_Lichtenstein]

Thank you! This helped!

I still wasn’t able to get it to work on Lightbox as explained here but I managed to get it done when setting up the VH of the holding collection item, and a matching min VH height for the img itself.