Comments on: object-fit

By: Gratisinserate

Gratisinserate — Tue, 22 Feb 2022 09:29:16 +0000

A reminder on the accessibility implications of choosing between an img element and a CSS background: If the image is purely decorative, then go for a CSS background. Otherwise, an img is more suitable.

By: David Waterman

David Waterman — Fri, 19 Feb 2021 08:32:53 +0000

With ‘contain’, how to find out the resulting scaled image size? The image will be constrained in different ways depending on the orientation of both the screen and the image, so it’s not trivial to figure it out; since the browser has already done the work, are there not properties on the img element that are the scaled dimensions?

By: Ephrem

Ephrem — Thu, 28 May 2020 20:01:32 +0000

In reply to Abdul.

@Abdul I think what you’re looking for will be addressed by the CSS properties background-size (https://css-tricks.com/almanac/properties/b/background-size/) and background-position (https://css-tricks.com/almanac/properties/b/background-position/).

By: Abdul

Abdul — Fri, 10 Apr 2020 08:23:23 +0000

Can we apply object-fit on background images? I’ve been trying for 3 days to scale the bg image down but it shows completely different sections of the image on mobile and laptop

By: Mosne

Mosne — Sat, 27 Jan 2018 00:48:11 +0000

In reply to Mosne.

https://github.com/aFarkas/lazysizes and supports object-position too!

.is-contain.imagecontainer .imagecontainer-img {
  object-fit: contain;
  object-position: 0 0;
  font-family: "object-fit: contain, object-position: 0 0";
}

By: Mosne

Mosne — Fri, 26 Jan 2018 23:43:03 +0000

FYI https://jsfiddle.net/trixta/x2p17f31/ this demo work on ie11 ;)

By: Erik Woods

Erik Woods — Thu, 30 Nov 2017 20:44:07 +0000

In reply to Constance. Constance, your polyfill is fantastic. Thank you very much. The others I tried would not work for my situation.

By: Jen

Jen — Wed, 21 Jun 2017 15:56:08 +0000

Thank you so much for this (object-fit: contain). Worked like a dream controlling my featured image sizes in cpts.

By: Alex

Alex — Fri, 17 Mar 2017 17:12:57 +0000

In reply to John Darling. Consider a blog post featured image. If you use background-image as the only way the image is displayed due to design constraints, that image will not display as metadata when the article is shared on Social Media, or in google searches. You can get the layout benefits of background-image with images without sacrificing the data that you need outside of your side to display your post properly.

By: Federico Brigante

Federico Brigante — Mon, 11 Apr 2016 18:05:46 +0000

In reply to Loque.

There are a few perfectly-working polyfills:
* for images: https://github.com/bfred-it/object-fit-images
* for videos: https://github.com/jonathantneal/fitie

By: Andrew Douglass

Andrew Douglass — Thu, 10 Mar 2016 00:16:17 +0000

In reply to John Darling. The reason I'm looking to use it is exactly what you said. I'm replacing some stuff that used css background images with responsive images, and I need to use object-fit:cover on them. Maybe someone will propose srcset for background images in the css spec instead though. =)

By: Constance

Constance — Tue, 23 Feb 2016 07:20:48 +0000

I’m really digging using object-fit instead of inlining background-images, so I spent an hour or two coming up with a working jQuery polyfill for IE Edge and other non-supporting browsers. Feel free to check it out (and contribute if you see any issues!)

https://github.com/constancecchen/object-fit-polyfill

Alternatively, you can also check out Primož Cigler’s solution, which sets the image as a background-image on the parent container. https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3#.sqaa2ssg4

By: Rachel Bratt Tannenbaum

Rachel Bratt Tannenbaum — Sun, 21 Feb 2016 14:02:10 +0000

Great post :) I Love object fit! It made my life easy when styling a website to fit into the design I got. Native LG & Samsung browsers doesn’t support object-fit as well. The polyfill workes great for them.

By: Joey

Joey — Fri, 19 Feb 2016 08:20:11 +0000

There’s an IE hack three comments up that looks legit. I still haven’t hopped on the “IE’s okay, now!” train, so I don’t know if it really IS legit, but it does seem worth giving a shot.

By: kathir

kathir — Sat, 30 Jan 2016 12:17:25 +0000

In reply to Phuong. object fit css not working ie browser.any alternative solution please give soon.