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.
Learn more about sizing elements in our 101 crash course → university.web...
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/co...
webflow.com
/ webflow
/ webflow

[@brandonwolff966]

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.

[@pixelgeek]

This is a great point for us developers. But there are times when a client will upload a too small or too big image and this trick really helps crop things perfectly for them.

[@apache95]

50 Shades of Grímur. Beautiful.

[@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

[@Webflow]

Hi @Reinold Guzman, thanks for the suggestion! We'll see what we can do.

[@Webflow]

In the meantime, you may find this video lesson helpful: kzbin.info/www/bejne/fYHEladurNJ6jq8

[@reinoldg]

@@Webflow thank you

[@rodrigo.lamadrid]

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

[@georgeuxuidesign]

Damn, this tool and these teachers never stop surprising me

[@thejaysehansen]

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

[@billdodson207]

pure beauty

[@mr.fanstastic9010]

What about rotation and flip?

[@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

[@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?

[@christossoulakis2539]

Webflow compresses big images if I'm not mistaken. It's usually better to upload an image with the correct size

@@christossoulakis2539 Not an expert, but I would guess it's probably something to do with the image optimization and which one Webflow is choosing to display, based on the horizontal size?

[@Webflow]

Hi Alex, great question! It sounds like your images may be getting resized with our responsive image workflow: university.webflow.com/lesson/responsive-images Within this guide you'll learn how to disable responsive images which should prevent the resizing issue which you're running into. If you have any questions, please let us know on the Webflow Forum: forum.webflow.com/ We're here to help!

[@alexxlem]

@@Webflow Oh wow - I just did a test and yes, that was exactly the problem. I disabled the responsive image and it now the same image looks super sharp on desktop and mobile! Thanks!

[@nikitamanchenko7507]

Is working only for Images, not for DIV or ?

[@Webflow]

Yes. This only works for inline images.

[@Wizastudios]

Did you fix the publish rotation problem yet?

[@xbrsh]

thank you for helping.

[@Webflow]

You're welcome!

[@deadshotgaming6449]

Thanks

[@PepperstreetDev]

Thank you !!!

[@asjap2533]

thank you!!

[@harrymolyneux]

ASMR video of this guy saying "swishsed" pls

[@farisfaisyal6493]

Thankss

[@DishanTD]

👌👌👌

[@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

[@Webflow]

Hi Leo! Thank you so much for asking about your site build styles. Can you please create a post on the Webflow Forum with your site details so that we and the community can help with this design related question? forum.webflow.com/ Thanks in advance!

[@1WillyDAVID]

thanks grimmur!

[@shubhamparekh9808]

Great 👍

[@flyingbrokenarrow]

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

[@jo69123]

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

[@georgemath2878]

I love you Grimur...haha

[@RogrM6]

🙌🙌🙌🙌🙌