Figuring out Object fit

Dear Webflowians,

I’ve recently started working on a website and ran into the problem with image responsivity.
I was very happy to stumble upon this article, where Jon from Edgar Allan Studio thoroughly describes optimization of image display by using Object fit.

Here he’s mentioning that its possible to change ratios of images according to the size of the viewport (i.e 16x9 at desktop/tablet, 1x1 at mobile)
For me, the changes done with Custom code work perfectly throughout all of the breakpoints, but I have a hard time figuring out how to make individual changes since every class alteration is afterwards present in every breakpoint.

I would greatly appreciate any kind of insight, thank you.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Welcome to the community @MartinBosak!

This writeup seems to be a bit outdated now, since Webflow now has native support for object-fit in the Designer:

You should be able to achieve the effect without any custom code by simply changing styles per breakpoint as needed :+1:

Oh, I really didn’t realize it was this simple, I’ll dig into it right away.
Thank you for your help.

1 Like