Figuring out Object fit

Design help Custom code
1

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. Fully Responsive Images | Edgar Allan

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)

2

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:

3

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

1 Like