Collection images not displaying fully

Design help General
1

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:

incomplete-images-Chrome
incomplete-images-Chrome1935×1061 352 KB

incomplete-images-MSEdge
incomplete-images-MSEdge1911×929 202 KB

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

1 Like
2

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:

1 Like
3

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
4

No problem! Happy to help :webflow_heart: