Streaming live at 10am (PST)

Feedback: Object-fit support

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

6 Likes

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

2 Likes

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

2 Likes

Yep! The example shown is a Collection List

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

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

1 Like

Is there any plans for support for object-position (https://developer.mozilla.org/en-US/docs/Web/CSS/object-position)? That, I think, would be the nail in the coffin of a lot of background images.

4 Likes

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

3 Likes

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

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

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.

7 Likes

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

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.

5 Likes

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

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

3 Likes

Not yet :point_up: but something we’re aware of.

2 Likes

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