Use object-fit to crop and fit images into any defined size — Micro lesson #25

No more individually sizing images in Adobe Photoshop, Figma or Microsoft Paint. With the power of object-fit, you can fit your images into any defined width or height on your canvas. To accomplish this, follow these two steps:

1. Set a defined width and height on your image
2. Select any of the object-fit property (fill, cover, contain, none, scale down)

Now you can temporarily exit out of your image editing program, because you can size and position your images directly in Webflow.

----------

[rodrigo.lamadrid]

You're a darling, Grimur! This was soooo useful 🤩 keep the quality content and tutorials coming!

[brandonwolff]

Be careful of how much extra image you aren’t showing throughout your site for load time. That part of the image still needs to load even though it isn’t being shown.

[reinoldg]

Making images fit or resizing them on the fly plus applying relative and absolute properties is always a struggle for me. Maybe you could make a tutorial with a dozen of examples on how to crop, resize, transform, overlap and fit images. That would be great for beginners

[gdsigner]

Damn, this tool and these teachers never stop surprising me

[thejaysehansen]

Great vid. Can 'cover' also work with embedded videos somehow?

[alexxlem]

I've used the object-fit feature in Webflow and I noticed when I use an image that has by default a landscape aspect ratio (e.g. 6:4), it looks super sharp in an horizontal aspect ratio container, but when I change the aspect ratio of the container, for instance for mobile, to a vertical portrait ratio (e.g. 4:6), the image become slightly blurry. Yes, I’m using an image that is at least 2x (width and height) of the container size, so it’s supposed to be sharp on retina displays. My workaround is to crop the same image in Figma to a 4:6 ratio and re-export it, it now looks super sharp on mobile. Any idea why?

[ChineduChidiebere]

Hello team webflow,
when I change designs on smaller devices, it affects both the larger screens. I don't know if this is a technical issue or i'm missing something. I need help please

[nikitamanchenko]

Is working only for Images, not for DIV or <embed>?

[Wizastudios]

Did you fix the publish rotation problem yet?

[HOLBAG]

Please, I have a question
ïam busy to build website local
on main menu are price button page
on this page there are two buttons one for men price and another for ladies price
when click on men button I only see the price of man .
when click on ladies button I see only the price of ladies
this happend in the same page not go to another page.

Thanks

[harrymolyneux]

ASMR video of this guy saying "swishsed" pls

[joeygarner]

When I do that, it doesn't work.

[flyingbrokenarrow]

Hey Grímur, please say squished again. Please...

[jo]

I'd be a lot more helpful if you could break down how real pro designers place images and set real world responsive width tricks so that any image works at any given viewport width
This is not a real world use case