CSS to make images fit in a card list

[igor_a]

Hi all, how can I force my app to show the entire image inside a list component, like we can already do with the regular image component. Any CSS trick for this?

This is what I want to avoid:

Thanks!

[Darren_Murphy]

Rather than trying to use CSS, the easiest thing to do is to adjust the aspect ratio of your images to fit the container size.

For example, if you are using Cards or Tiles with an image shape of 3:2, then resize your images to fit that. ie. make them 300x200 or 600x400.

[Carter]

Yes, this is the best way to do.

[Robert_Petitto]

I use cloudinary for this:

Glide: Manipulate images dynamically with CLOUDINARY (Live Stream)

[igor_a]

Thanks Darren.
Problem with this is that I would have to do it manually for hundreds of images and also most images are used in different contexts with different sizes.

I just don’t understand why we have an option to do this in the Image component, but not in others.

Thanks again for your suggestion.

[igor_a]

Thanks Robert!
I’ll be honest I’ve seen Cloudinary before but when I saw 25 credits for the free plan I thought it meat 25 images haha

But that I now know it means 25 THOUSAND images, I’ll implement it.

Thanks!

[igor_a]

Hi Robert, something interesting I’ve noticed is that Glide resized with Cloudinary my already resized images. So now I upload an image, use Cloudinary to resize it in a template column using c_limit, but when I add this already manipulated image to a card list, for example, Glide manipulates it again resizing to a c_fill.

How do I avoid this?

[igor_a]

Well I figured It out I guess. I used the same dimension limits than Glide (225x151 for 3:2 and 225x76 for 3:1) and the “composed” image worked! Just wondering how to add some padding now. But I’ll figure it out. Thanks a lot again everyone!