Streaming live at 10am (PST)

Collection images not displaying fully

I am at a loss here… In a grid showing cards (shop info) populated from a CMS collection, some of the images are displaying only partially - they are cropped at a (random) height.

This behaviour varies with the browser - attached is a screenshot from Google Chrome as well as from MS Edge.

The original photos are not of the same height, so I would not expect them to show all with the same height, but they are set to 100% width of the card and to auto height…

Would any kind soul be able to help me figure out how to set this up correctly?

Thank you very much :slight_smile:

Here is my site Read-Only:
Please see the page “Prodejny”.

1 Like

Hey @Pataka

One little trick you can do is using object-fit: cover; for the images and will act as a background, but they will be actual images.

See here >

Here’s the code

 .card-image {
  object-fit: cover;

Piter :webflow_heart:

Thanks a million for helping me out, Piter!
It has all worked perfectly, and thank you so much for making such a useful tutorial! :slight_smile:

Best, Pataka

1 Like

No problem! Happy to help :webflow_heart: