Control the dimensions and the ratio of CMS images inside of a Collection List

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:

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:

1 Like

Thank you!
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. :+1: