object-fit Image Polyfill

Polyfills object-fit: cover on <img> or <picture> 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 <picture> element itself.

Install

yarn add @threespot/object-fit-image

Usage

Markup

  <div class="bg-image">
    <img class="bg-image-source" src="https://satyr.io/320x16:9" srcset="https://satyr.io/320x16:9 320w, https://satyr.io/640x16:9 640w" alt="Image description.">
  </div>

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:

  .bg-image {
    display: block;// for <picture> elements
    position: relative;

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

Additional markup examples

  <!-- Picture tag -->
  <picture class="bg-image">
    <source srcset="https://satyr.io/768x16:9/3" media="(min-width: 768px)">
    <source srcset="https://satyr.io/480x16:9/2" media="(min-width: 480px)">
    <img class="bg-image-source" src="https://satyr.io/320x16:9/1" alt="Image description 2 test.">
  </picture>

  <!-- Picture tag with wrapper -->
  <div class="bg-image">
    <picture class="bg-image-source">
      <source srcset="https://satyr.io/768x16:9/3" media="(min-width: 768px)">
      <source srcset="https://satyr.io/480x16:9/2" media="(min-width: 480px)">
      <img src="https://satyr.io/320x16:9/1" alt="Image description 1 test.">
    </picture>
  </div>

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.