src/js/objectFitPolyfill/objectFitPolyfill.js
function($container) {
    var styles = window.getComputedStyle($container, null);
    var position = styles.getPropertyValue("position");
    var overflow = styles.getPropertyValue("overflow");
    var display = styles.getPropertyValue("display");

    if (!position || position === "static") {
      $container.style.position = "relative";
    }
    if (overflow !== "hidden") {
      $container.style.overflow = "hidden";
    }
    // Guesstimating that people want the parent to act like full width/height wrapper here.
    // Mostly attempts to target <picture> elements, which default to inline.
    if (!display || display === "inline") {
      $container.style.display = "block";
    }
    if ($container.clientHeight === 0) {
      $container.style.height = "100%";
    }

    // Add a CSS class hook, in case people need to override styles for any reason.
    if ($container.className.indexOf("object-fit-polyfill") === -1) {
      $container.className = $container.className + " object-fit-polyfill";
    }
  }
function($container) {
    var styles = window.getComputedStyle($container, null);
    var position = styles.getPropertyValue("position");
    var overflow = styles.getPropertyValue("overflow");
    var display = styles.getPropertyValue("display");

    if (!position || position === "static") {
      $container.style.position = "relative";
    }
    if (overflow !== "hidden") {
      $container.style.overflow = "hidden";
    }
    // Guesstimating that people want the parent to act like full width/height wrapper here.
    // Mostly attempts to target <picture> elements, which default to inline.
    if (!display || display === "inline") {
      $container.style.display = "block";
    }
    if ($container.clientHeight === 0) {
      $container.style.height = "100%";
    }

    // Add a CSS class hook, in case people need to override styles for any reason.
    if ($container.className.indexOf("object-fit-polyfill") === -1) {
      $container.className = $container.className + " object-fit-polyfill";
    }
  }
function ( $container ) { var styles = window . getComputedStyle ( $container , null ) ; var position = styles . getPropertyValue ( "position" ) ; var overflow = styles . getPropertyValue ( "overflow" ) ; var display = styles . getPropertyValue ( "display" ) ; if ( ! position || position === "static" ) { $container . style . position = "relative" ; } if ( overflow !== "hidden" ) { $container . style . overflow = "hidden" ; } // Guesstimating that people want the parent to act like full width/height wrapper here. // Mostly attempts to target <picture> elements, which default to inline. if ( ! display || display === "inline" ) { $container . style . display = "block" ; } if ( $container . clientHeight === 0 ) { $container . style . height = "100%" ; } // Add a CSS class hook, in case people need to override styles for any reason. if ( $container . className . indexOf ( "object-fit-polyfill" ) === - 1 ) { $container . className = $container . className + " object-fit-polyfill" ; } }
Check the container's parent element to make sure it will
correctly handle and clip absolutely positioned children

@param {node} $container - parent element
Check the container s parent element to make sure it will correctly handle and clip absolutely positioned children