Streaming live at 10am (PST)

Collection images not displaying fully

Hello,
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: https://preview.webflow.com/preview/zijdobre?utm_source=zijdobre&preview=6060e2c118778b0d5e46ebd85aa84884
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 > https://www.loom.com/share/a6011a7707a24bb4af089471ffdd385f

Here’s the code

<style>
 .card-image {
  object-fit: cover;
 }
</style>

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: