Im trying to use a collection list to make the client section of a site.
however - the images are not responding the way I would like, perhaps Im missing something
my goal is that the images will resize but will keep the ratio and not stretch - because they are different in sizes and in collection list it changes them all when you make a change to one.
here’s the site for the example: https://preview.webflow.com/preview/kenan-safety?preview=ec875c97ce2d6fb799de33aff7d5eb83
OK see that group of fields?
Never touch them! Once you’ve started giving them a value, it will stick even if you try to reset the source of the content of the image. That’s your problem now.
To fix this, delete the image and put a brand new image element inside of it. And let those fields blank.
Better, now relink to your CMS image:
Now we have image with their proper ratio. Let’s switch to styles.
I gave a class to the image and I’m using style to define rules that aren’t touching the px value of the images dimensions. Here a simple rule allows me to define a max width for all images, and they resize as you’d expect them to. I also gave some properties to the collection item element in order to have a nice grid:
Very detailed and super helpful.
Thank you for providing this solution Vincent. I had a similar problem and this answer fixed the issue with sizing on the collection list images.