Object fit - on image from CMS

I have a hard time to get work Object fit on the image from CMS. Green is normal div and image, other two are images from CMS all wrappers and images have totally identical styling applied. How to solve this problem? THanks

I will share a public link but because I’m testing on this issue in several areas it is a big mess there :thinking:


Here is my public share link: [LINK]
(how to access public share link)

I have found other problem.Style result is absolutely different in editor to published site, I mean in this issue. I have make it partially work but instead squares are images a rectangles. In editor they are ridiculously high and on published site are much lower! So now, what result I can trust. That’s what I did not expected at all.

After several hours to figure out how object-fit work in Webflow for objects from CMS I have just crop the images. Up to now my experience with Webflow is: Unpredictable results (editor vs published) I can’t trust and relay on these, plus unintuitive GUI not possible to make sidebars a bit wider (on 27" it is really narrow) , always closing tabs etc. But I sill give it a chance, nothing is perfect. Such a huge waste of my time with this issue. :thinking:

Sorry to hear about the frustration and not being able to get this working like expected. I’ve had no problem getting this functionality in the past, so there really shouldn’t need to be a need to pre-crop these images, however without being able to see the specific situation it’s hard for anyone in the community to help you out.

You mentioned including a public link but I don’t see it—would you mind generating one so I can take a look? In the meantime, here’s a my published site and read-only link showing this functionality on a quick test project for reference:

Live Site
Read-Only Link

Basically the only change I needed to make after defining my grid container height was to set my dynamic image to height: 100% and change the object-fit to cover.

Hopefully that helps, but if not I’d be happy to take a closer look at your exact implementation.

Hi mikeyevin and thank you for your time to look on this issue. I have deleted link as is clients projects and I have solved problem by cropping images (for now). As I’m developing for several years I’m familiar how thing should works, and I made it work for normal image from sidebar (no problem there) but for some reason it didn’t work for image from CMS. My biggest frustration was that identical setup structure and styling works differently.

As someone who’s been developing for many years as well I’m aware how frustrating this can be but just know that this functionality should work as expected on any future projects using CMS you may come across.

The community is always here if you come across any other issues so feel free to reach out if you decide to give it another shot on a future project :v:

1 Like