# CSS to make images fit in a card list **URL:** \ **Category:** Ask for Help\ **Created:** [September 26, 2022, 6:27am UTC](https://community.glideapps.com/t/css-to-make-images-fit-in-a-card-list/50181 "2022-09-26T06:27:57Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![igor\_a](https://avatars.discourse-cdn.com/v4/letter/i/8491ac/32.png) [@igor\_a](https://community.glideapps.com/u/igor_a)\ **Post date:** [September 26, 2022, 6:27am UTC](https://community.glideapps.com/t/css-to-make-images-fit-in-a-card-list/50181/1 "2022-09-26T06:27:57Z")
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: ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/d/0dbc3dcef9566ba103fc77042f1938db717858dc.jpeg) Thanks! ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [September 26, 2022, 6:59am UTC](https://community.glideapps.com/t/css-to-make-images-fit-in-a-card-list/50181/2 "2022-09-26T06:59:47Z")
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. ---
**Author:** ![Carter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carter/32/45004_2.png) [@Carter](https://community.glideapps.com/u/Carter)\ **Post date:** [September 26, 2022, 8:56am UTC](https://community.glideapps.com/t/css-to-make-images-fit-in-a-card-list/50181/3 "2022-09-26T08:56:58Z")
Yes, this is the best way to do. ☝ ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [September 26, 2022, 1:38pm UTC](https://community.glideapps.com/t/css-to-make-images-fit-in-a-card-list/50181/4 "2022-09-26T13:38:53Z")
I use cloudinary for this: [![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/6/26473e858f7168a32425c938f7a663b259074208.jpeg "Glide: Manipulate images dynamically with CLOUDINARY (Live Stream)") ](https://www.youtube.com/watch?v=cmjOKxB5jWQ) ---
**Author:** ![igor\_a](https://avatars.discourse-cdn.com/v4/letter/i/8491ac/32.png) [@igor\_a](https://community.glideapps.com/u/igor_a)\ **Post date:** [September 26, 2022, 3:27pm UTC](https://community.glideapps.com/t/css-to-make-images-fit-in-a-card-list/50181/5 "2022-09-26T15:27:47Z")
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. ---
**Author:** ![igor\_a](https://avatars.discourse-cdn.com/v4/letter/i/8491ac/32.png) [@igor\_a](https://community.glideapps.com/u/igor_a)\ **Post date:** [September 26, 2022, 3:29pm UTC](https://community.glideapps.com/t/css-to-make-images-fit-in-a-card-list/50181/6 "2022-09-26T15:29:06Z")
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! ---
**Author:** ![igor\_a](https://avatars.discourse-cdn.com/v4/letter/i/8491ac/32.png) [@igor\_a](https://community.glideapps.com/u/igor_a)\ **Post date:** [September 26, 2022, 3:57pm UTC](https://community.glideapps.com/t/css-to-make-images-fit-in-a-card-list/50181/7 "2022-09-26T15:57:56Z")
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? ---
**Author:** ![igor\_a](https://avatars.discourse-cdn.com/v4/letter/i/8491ac/32.png) [@igor\_a](https://community.glideapps.com/u/igor_a)\ **Post date:** [September 26, 2022, 4:14pm UTC](https://community.glideapps.com/t/css-to-make-images-fit-in-a-card-list/50181/8 "2022-09-26T16:14:34Z")
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! ![IMG_4063](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/6/86e2a556c13c7769dff44fe4eb66a49038e337f6.jpeg) ---
**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\ **Post date:** [September 27, 2022, 4:15pm UTC](https://community.glideapps.com/t/css-to-make-images-fit-in-a-card-list/50181/9 "2022-09-27T16:15:16Z")
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.