Streaming live at 10am (PST)

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

** 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
    image

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

image
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%

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

image

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

fit

Change image fit to cover


image

Extra setting if you want:
image

Extra reading:

Result:

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


Related?

You don’t want to crop images. Use masonry

By custom code:

By webflow:

13 Likes

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):

image

1 Like

Thanks for sharing @Siton_Systems :webflow_heart:

1 Like

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

1 Like

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

1 Like

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

Regards
Klaus

1 Like

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.

1 Like

No difference related to GRID VS Flexbox.

Start point - collection list display grid

wrapper div styles:


image styles:

done:

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

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

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: Webflow - mooqtrees
live site page: presse

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

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

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):

1 Like

This is this area

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…

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.

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…