Steps to reproduce
The CSS3 ‘object-fit’ property allows configuring the scaling/cropping/stretching behavior of replaced content such as images, videos, and canvases. Currently it is not supported at all in Edge, but seems well supported in latest versions of Chrome, Firefox, and Safari.
It’s extremely useful for ensuring that graphical content is displayed at a fixed aspect ratio, either centered (‘contain’) or zoomed/cropped (‘cover’) to fit a variable-sized content area.
Video elements in Edge currently act similarly to the ‘contain’ setting by default, while images and canvases behave similarly to the ‘fill’ setting (the default per spec).
Cross-browser support: http://caniuse.com/#feat=object-fit
Comments and activity
- Microsoft Edge Team
Changed Status to “External”
I notice someone marked this as a duplicate, but there’s no link to the issue it’s a duplicate of. Can you link please? Thanks!
Thank you from sharing your feedback with us. This is an issue we track already, so we merged this with our existing issue keeping track of this property. The items we link to might not always show up because we have internal deliverables as well.
A lot of US government clients still use Internet Explorer 11 instead of Edge. It would be great if you could add support to that browser as well.
Hi @Brad E.
Is this bug fixed? If not, is there any plan about when to fix it?
This still doesn’t seem like it’s been fixed. I recently wanted to use
object-fit: coverbut in Edge it seems to be buggy, especially when using in combination with predefined fixed
Images don’t get “zommed in” and cropped but squished instead.
Feel free to look at my CodePen example.