Feedback: Object-fit support

THANK YOU SO MUCH! Ive been waiting for this feature for so long. :heart:

2 Likes

This is fantastic Webflow! So good to be making sites more accessible, it feels more civically responsible. Good show!

2 Likes

So good! Merry Christmas to you guys too :christmas_tree: :tumbler_glass:

1 Like

Is Webflow providing any fallback support for Internet Explorer? I know that IE usage is less than 3%, but for some audiences it’s larger than that.

@Ryan_Power

Object-fit is not supported by Internet Explorer. It is not an issue of Webflow not supporting IE. IE users are used to a degraded experience. This means that images will just display at their normal dimensions instead. Browsers ignore CSS they can’t parse.

2 Likes

Thank you for looking into object-position soon, as well, in addition to the now-complete object-fit.

Object-position is needed for these tasks:

  • Set image focal points on-the-fly, avoiding cropped versions flooding the poor Asset Manager
  • Change position across breakpoints (i.e., landscape on desktops vs portrait on mobile—sometimes, only certain parts of the image work well)
  • End the 5+ year tyranny of background images

I’m thankful for the effort so far. At the same time, object-fit will have much wider usage (i.e., supplant performance-regressive background images) after object-position has been integrated.

See the Wishlist item: object-position was explicitly noted, so I’m a little unsure why object-position was dropped from being “formally planned”. Likewise, I guess now we need to create a new wishlist item for object-position, as Webflow marked the entire idea as “Shipped”.

I was mistaken earlier, thinking both had shipped.

Sincerely re-consider adding object-position as a formal planned update to this feature. Thank you so much for adding object-fit in the mean time: I’m very glad images & their performance-sapping quirks aren’t being neglected at Webflow in 2020 (after the issues we’ve had with fonts earlier in the year).

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. :crossed_fingers:

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! :muscle:

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.