Feedback: Object-fit support

Community resources Product feedback
#15

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

2 Likes
#16

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

2 Likes
#17

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

1 Like
#18

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.

#19

@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
#20

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

#21

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?

#22

Have a looks at CSS object-fit Property

It explains it all pretty well

1 Like
#23

Object fit on images much appreciated!! However desperately needs position options for cropping of images. :crossed_fingers:

#24

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
#25

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.

#26

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

#27

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.

#28

Ok, cool. They are actual bg images, so I guess I will leave them as is. Thanks @dram.

#29

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.

#30

Good news friends! We’ve just released object-position support as well.

Thanks again for all your input!

1 Like
#31

thank you! So to get the image to “fit” it needs to be a child of the div?

1 Like
#32

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.

#33

hi @rps what problem do you have with?

#34

Hey @rps here’s a video from our education team about object-fit

Let us know if you have further questions.