Feedback: Object-fit support

[brjohnson (Barrett Johnson)]

Please leave feedback on the below announcement in this thread! Thanks

Control image resizing within elements using object-fit

Thanks to popular demand, we’ve added the object-fit property to Webflow (shortened to “fit” on the style panel), giving you control over how images resize within their parent elements — and a more accessible and faster-loading alternative to background images. See why at the bottom of this update. [image] Control how images resize within their parent elements using the fit property. Object-fit in action As shown in the first GIF in this update, you can use the fit property to control how a …

[JanneWassberg]

Good work, really nice feature. Took a quick look at it and glad to se it works fine in Collection Lists. Will do more testing

[RoseWebStudio (Jason Rose)]

Excellent addition was looking at achieving this a few days ago with code, no need to worry now. Thanks

[brjohnson (Barrett Johnson)]

Yep! The example shown is a Collection List

[dram (Alex Dram)]

Adding object-fit property into a custom code on every project was one of the first things i always did.

[allthingsGJD (Graham Jones)]

Wow this is a big one! Massive bonus to control images in the same way as background images, I have been using custom code for months now to achieve this.

Let’s face it, background images are massively controllable but very poor for mobile optimisation and high def.

[jhiggins (John Higgins)]

Is there any plans for support for object-position (object-position - CSS: Cascading Style Sheets | MDN)? That, I think, would be the nail in the coffin of a lot of background images.

[brjohnson (Barrett Johnson)]

Nothing formally planned at the moment, but an enhancement we’re aware of! We’ll update everyone if that changes.

[YoussefSarhan]

This is excellent. It will be great for page-load speeds.

I put together a simple tutorial that explains more about how it works.

- YouTube

In part, I did this to help myself understand object-fit, and I hope others find it useful.

I agree with object-position too. That would be awesome.

[ss_pics]

Does this work within a 100% width Section or DIV?

[TG2]

This is basically one of the best Christmas presents I could’ve ever asked for.

Thank you SO MUCH, Webflow! I’m so eager to start. My use case is like many others: background images allow for a lot of “fast-acting” creative tests, but are abhorrent for mobile users because now everybody’s 720p phone is now downloading a 300 KB 4K-scaled image.

With luck and this feature now being integrated (instead of the custom code I’ve been using…sigh), I think our homepage may squeak in under 100 KB on mobile.

Praise be. I’m so excited to put this to use! Thank you so much, Webflow. Thank you for listening to popular demand: this was a sorely needed CSS feature and moves Webflow into taking serious design & serious performance into the hands of the world.

[pupinko (Harald Vogl)]

Well done. Suppose adjustment options like for background images are not possible in this case?

[Ryan_Power]

Now I don’t have to worry about clients uploading 2MB images to the CMS. Thanks Webflow!

[brjohnson (Barrett Johnson)]

@brjohnson

Nothing formally planned at the moment, but an enhancement we’re aware of! We’ll update everyone if that changes.

Not yet but something we’re aware of.

[briandesimone (Brian)]

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

[Simteau (Uili Fecteau)]

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

[HammerOz (Hamish)]

So good! Merry Christmas to you guys too

[Ryan_Power]

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.

[webdev (Jeff Selser)]

@Ryan_Power

@Ryan_Power

Is Webflow providing any fallback support for Internet Explorer?

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.

[TG2]

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).