What’s the difference between the various ‘fit’ types? ie. Fill, Contain, Cover, Scale Down? and how can I set the object position as I can with background image?
Have a looks at CSS object-fit Property
It explains it all pretty well
1 Like
Object fit on images much appreciated!! However desperately needs position options for cropping of images. 
Thanks for writing all that up @TG2, I really appreciate it! I think you make a very fair point - we marked the item as shipped to ensure all who had voted on this specific topic would see that we added object-fit, but as I’ve pointed out elsewhere, object-position is still an open request.
To help channel those requests, I’ve gone ahead and created a specific wishlist item for object-position. I’d encourage everyone who feels strongly about that feature to vote on it and share any additional use case requirements in the comments.
Thanks all!
1 Like
Thank you kindly for your empathetic understanding, @brjohnson. I appreciate separating the object-position into a second Wishlist item; I’m hopeful it can enter the backlog! 
Until then, happy 2020 & thank you for object-fit.
So, should I be replacing all of my background images with this new process to reduce load times? What I’m reading in this thread is that mobile devices will see a huge boost in load time.
And, to do that, what’s the process? If these are dumb questions, sorry. That’s what forums are for, right??
It depends on your use case. If you have used a lot of bg images just to show your products or blog posts then yeah - you will need to change collection structure to have regular images with object-fit rather than bg images. if you only have actual background images for heros etc then you can probably keep it.
Ok, cool. They are actual bg images, so I guess I will leave them as is. Thanks @dram.
Struggling to get this to work in some cases.
If I have a div with a set size say 300x300px, and I insert a large landscape orientated image, when I select Fit/Cover on the image it has no effect and does not fill the square div, the image will only expand to 100% width and therefore does not fill the full height of the div.
The image would need to be more than 100% width.
I needed to set the image sizes like this:
min-width: 100%
min-height: 100%
max-height: 100%
to get it to work as expected.
I haven’t see this mentioned anywhere so thought I would add this.
If there’s a better way, please let me know,
thanks, Kieran.
Good news friends! We’ve just released object-position support as well.
Thanks again for all your input!
1 Like
thank you! So to get the image to “fit” it needs to be a child of the div?
1 Like
Anyone at Webflow needs to do an actual #nocode tutorial on this. I figured it out once, and again, after hours I cannot do it a 2nd time. Your blog post is the only thing that comes up, and it explains NOTHING about the settings for the image class or the containing div. PLEASE, PLEASE do a tutorial about this. If there is one, the SEO for wherever it may be is the worst because nothing I search for on google can find the solution to what you make look so simple (as usual). Why so much torture every time I touch Webflow. I haven’t even eaten today because of this.
hi @rps what problem do you have with?
Hey @rps here’s a video from our education team about object-fit
Let us know if you have further questions.
Lots. I need to fit my images to 100% width; this doesn’t seem to apply. Or, does it? Or, in a flexible grid cell… does this still work? Also, now I’m pulling images from a CMS into the grid, does this still work? Most advice I’ve read in the past seems to suggest a div is needed to “crop” the image; is that no longer true? Then, what’s the position relationship between image and enclosing divs? Etc.
I know what “object fit” does; that tutorial is super basic (but, if I’d never heard of it, appropriate). It’s every context I need to use it in that is not covered. Already some of my questions are in DesignChief’s post above, thus why Google brings me here . However, I honestly don’t understand his input, but my current situation sounds the same or very similar. Thank you.
EDIT: side note, I went from that mini tutorial, back the Webflow channel… and, you don’t seem to have a playlist for these. I couldn’t even find it again there.
EDIT 2: Read through all the YouTube comments… caught one that simply states “But it’s not responsive…” I think that probably sums it all up.
hi @rps concept and standards of object-fit is set by WC3 and in WF works as expected. To understand how object-fit work you can read documentation on MDN or if this is not for you clear enough you can get more information with descriptive examples on CSS Tricks
You can find list of videos WF tutorials on Webflow YT channel when select playlist in channel options.
Hope that reading content of provided links give you better understanding how object-fit works.
1 Like
@rps My personal approach for object-fit images is to set the width and height of the image to 100% then choose the fit style, which for me is usually cover. I place the image inside of a div element which becomes my image container. The sizing and responsiveness is handled on the image container and not the image itself. The image will always fill the container since it’s dimensions are 100% in both directions.
If that doesn’t help you achieve what you need to accomplish then please share your project’s read-only link along with a description or example of what you need to achieve. That will greatly help myself and other community members understand and provide more detailed solutions.
1 Like
This helped immensely. I get it now. Super useful; I’d suggest if/when time permits someone redoes the video tutorial this way. I really need to take some coding classes. Thank you!
1 Like
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.