Same size images (with CMS)

[Charles_St-Onge]

Hi, I am running into a bit of a design problem.
I am trying to do a youtube like interface where you can see a bunch of videos (the miniature and title and link being uploaded to a collection item by the client).

The problem is : none of the images he will upload will have the same size. So when i do ‘‘auto height’’ + ‘‘100% width’’ they are responsive but not aligned. I can’t fix a height and a width either since I want them to be responsive.

I would usually fill a div with an image using ‘‘cover’’ but I can’t do it with an image from a collection apparently.

Im I missing something here?
Thanks!

[blakelam]

Hi @Charles_St-Onge, the technique described in this post should work for you: Aspect Ratio Boxes | CSS-Tricks - CSS-Tricks

[mikeyevin]

Welcome to the community @Charles_St-Onge!

I would usually fill a div with an image using ‘‘cover’’ but I can’t do it with an image from a collection apparently.

Can you share your read-only link by chance? This should be possible with any images, regardless of whether or not they are manually added or added via the CMS.

How to Enable a Webflow Share Link

If you’re new to the Webflow forum, welcome! Anyone with the read-only link of your project can explore your project in the Designer. Any changes they make while in read-only mode will not be saved. This is helpful when you need design advice or when you need help troubleshooting an issue in your project. [Create and use a read-only share link — Webflow tutorial]

[Charles_St-Onge]

Worked great, had to struggle a little but this was really useful, thanks!

[Charles_St-Onge]

No need to anymore, this did the job : Aspect Ratio Boxes | CSS-Tricks - CSS-Tricks
I also saw the ‘‘Fit’’ options in the Size pannel, i never realised it was there but i can indeed use the cover setting on a CMS photo. I thought it wasn’t possible because I couldn’t use a CMS photo as the background of div. Anyway, thanks for the help!