object-fit polyfill for images
npm install @threespot/object-fit-imageobject-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.
``bash`
yarn add @threespot/object-fit-image
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
position: relative;
&-source {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
}
`
Additional markup examples
`html
This is free software and may be redistributed under the terms of the MIT license.
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.
