object-fit Image Polyfill


Polyfills object-fit: cover on or tags by applying the src as an inline “background-image” on a target wrapper. Required for IE 11- and Android 4.4-. We recommend using Picturefill to polyfill the element itself.

Install

``bash
yarn add @threespot/object-fit-image
`

Usage

Markup
`html



`

`js
import ObjectFitImage from "@threespot/object-fit-image";

var imageWrappers = document.querySelectorAll(".bg-image");

imageWrappers.forEach(el => new ObjectFitImage(el));

// With custom options
imageWrappers.forEach(el => new ObjectFitImage(el, {
visuallyHiddenClass: "vh",
backgroundPosition: "50% 0"
}));
`

Example styles for browsers that support object-fit:

`scss
.bg-image {
display: block;// for elements
position: relative;

&-source {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
}
`

Additional markup examples
`html











``

License

This is free software and may be redistributed under the terms of the MIT license.

About Threespot

Threespot is an independent digital agency hell-bent on helping those, and only those, who are committed to helping others. Find out more at https://www.threespot.com.