Alternatives for object-fit in IE11

The problem#anchor

I recently came across an interesting issue where several prerequisites led to my turning to the object-fit CSS property to achieve the desired layout. Here were the prerequisites:

• Support multiple image sizes based on browser size (srcset)
• Image paths are coming from another location after pageload so CSS-based background images were not feasible
• The image is used in the background under a gradient and some text.

Using object-fit alone would have worked great if it weren’t for the absolutely zero support in IE11, which happened to be a requirement for this particular project as well. The final solution ended up not being as straightforward as I had hoped so I’m documenting here hopeing that it helps someone else that came to the same crossroads.

First Attempt#anchor

To try to sidestep the use of object-fit for the background image, I opted instead to use absolute positioning and force a width of 100% like the example below. This mostly worked, but there were some cases on smaller breakpoints (depending on the image aspect ratio) that led to visible gaps in the container. I made the background cyan in this example so this gap is more noticeable.

See the Pen IE11 object-fit Alternative – before by Steve Woodson (@stevenwoodson) on CodePen.

Final Solution#anchor

In order to prevent gaps on mobile while also ensuring that IE11 desktop users had a reasonable experience, I finally opted to use a combination of the absolutely positioned method above and object-fit. I set the latter to kick in on mobile so I don’t have to try addressing these gaps individually like the revised example below.

See the Pen IE11 object-fit Alternative – after by Steve Woodson (@stevenwoodson) on CodePen.

Rationale#anchor

I believe the combination of absolutely positioning on desktop/tablet and object-fit on mobile was a worthwhile tradeoff between supporting an older browser while also ensuring modern browsers get the best experience possible. Going on the assumption that IE11 usage is rather low and that this number drops even lower at a mobile breakpoint size, I felt this was a reasonable solution.

Alternatives#anchor

Depending on your particular situation, here are a few other alternatives that could be pursued:

• Use a background image instead of an <img>. If you don’t need to support multiple image sizes using srcset or if the paths to the images are static and could be supplied using CSS breakpoints, you could use a background image with background-size: cover.
• Use Modernizr. If something like this is just one instance where you need to strike the balance between supporting IE11 while also building to modern standards, you could implement Modernizr to give you more control. Being able to check for support and have solutions for both situations is very powerful.
• Defined aspect ratio. Finally, if the image you’re trying to implement needs to fit into a container that has a set aspect ratio and doesn’t need to fit to content placed inside, you could have the images sized to the same aspect ratio as the container. Then the absolute positioning would work across all breakpoints and object-fit wouldn’t be necessary.

References#anchor

• https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
• https://caniuse.com/#search=object-fit
• https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
• https://modernizr.com/