src/js/objectFitPolyfill/objectFitPolyfill.js
function($media) {
    // Fallbacks, IE 10- data
    var fit = ($media.dataset) ? $media.dataset.objectFit : $media.getAttribute("data-object-fit");
    var position = ($media.dataset) ? $media.dataset.objectPosition : $media.getAttribute("data-object-position");
    fit = fit || "cover";
    position = position || "50% 50%";

    // If necessary, make the parent container work with absolutely positioned elements
    var $container = $media.parentNode;
    checkParentContainer($container);

    // Check for any pre-set CSS which could mess up image calculations
    checkMediaProperties($media);

    // Mathematically figure out which side needs covering, and add CSS positioning & centering
    $media.style.position = "absolute";
    $media.style.height = "100%";
    $media.style.width = "auto";

    if (fit === "scale-down") {
      $media.style.height = "auto";

      if (
        $media.clientWidth < $container.clientWidth &&
        $media.clientHeight < $container.clientHeight
      ) {
        setPosition("x", $media, position);
        setPosition("y", $media, position);
      }
      else {
        fit = "contain";
        $media.style.height = "100%";
      }
    }

    if (fit === "none") {
      $media.style.width = "auto";
      $media.style.height = "auto";
      setPosition("x", $media, position);
      setPosition("y", $media, position);
    }
    else if (
      fit === "cover"   && $media.clientWidth > $container.clientWidth ||
      fit === "contain" && $media.clientWidth < $container.clientWidth
    ) {
      $media.style.top = "0";
      $media.style.marginTop = "0";
      setPosition("x", $media, position);
    }
    else if (fit !== "scale-down") {
      $media.style.width = "100%";
      $media.style.height = "auto";
      $media.style.left = "0";
      $media.style.marginLeft = "0";
      setPosition("y", $media, position);
    }
  }
function($media) {
    // Fallbacks, IE 10- data
    var fit = ($media.dataset) ? $media.dataset.objectFit : $media.getAttribute("data-object-fit");
    var position = ($media.dataset) ? $media.dataset.objectPosition : $media.getAttribute("data-object-position");
    fit = fit || "cover";
    position = position || "50% 50%";

    // If necessary, make the parent container work with absolutely positioned elements
    var $container = $media.parentNode;
    checkParentContainer($container);

    // Check for any pre-set CSS which could mess up image calculations
    checkMediaProperties($media);

    // Mathematically figure out which side needs covering, and add CSS positioning & centering
    $media.style.position = "absolute";
    $media.style.height = "100%";
    $media.style.width = "auto";

    if (fit === "scale-down") {
      $media.style.height = "auto";

      if (
        $media.clientWidth < $container.clientWidth &&
        $media.clientHeight < $container.clientHeight
      ) {
        setPosition("x", $media, position);
        setPosition("y", $media, position);
      }
      else {
        fit = "contain";
        $media.style.height = "100%";
      }
    }

    if (fit === "none") {
      $media.style.width = "auto";
      $media.style.height = "auto";
      setPosition("x", $media, position);
      setPosition("y", $media, position);
    }
    else if (
      fit === "cover"   && $media.clientWidth > $container.clientWidth ||
      fit === "contain" && $media.clientWidth < $container.clientWidth
    ) {
      $media.style.top = "0";
      $media.style.marginTop = "0";
      setPosition("x", $media, position);
    }
    else if (fit !== "scale-down") {
      $media.style.width = "100%";
      $media.style.height = "auto";
      $media.style.left = "0";
      $media.style.marginLeft = "0";
      setPosition("y", $media, position);
    }
  }
function ( $media ) { // Fallbacks, IE 10- data var fit = ( $media . dataset ) ? $media . dataset . objectFit : $media . getAttribute ( "data-object-fit" ) ; var position = ( $media . dataset ) ? $media . dataset . objectPosition : $media . getAttribute ( "data-object-position" ) ; fit = fit || "cover" ; position = position || "50% 50%" ; // If necessary, make the parent container work with absolutely positioned elements var $container = $media . parentNode ; checkParentContainer ( $container ) ; // Check for any pre-set CSS which could mess up image calculations checkMediaProperties ( $media ) ; // Mathematically figure out which side needs covering, and add CSS positioning & centering $media . style . position = "absolute" ; $media . style . height = "100%" ; $media . style . width = "auto" ; if ( fit === "scale-down" ) { $media . style . height = "auto" ; if ( $media . clientWidth < $container . clientWidth && $media . clientHeight < $container . clientHeight ) { setPosition ( "x" , $media , position ) ; setPosition ( "y" , $media , position ) ; } else { fit = "contain" ; $media . style . height = "100%" ; } } if ( fit === "none" ) { $media . style . width = "auto" ; $media . style . height = "auto" ; setPosition ( "x" , $media , position ) ; setPosition ( "y" , $media , position ) ; } else if ( fit === "cover" && $media . clientWidth > $container . clientWidth || fit === "contain" && $media . clientWidth < $container . clientWidth ) { $media . style . top = "0" ; $media . style . marginTop = "0" ; setPosition ( "x" , $media , position ) ; } else if ( fit !== "scale-down" ) { $media . style . width = "100%" ; $media . style . height = "auto" ; $media . style . left = "0" ; $media . style . marginLeft = "0" ; setPosition ( "y" , $media , position ) ; } }
Calculate & set object-fit

@param {node} $media - img/video/picture element
Calculate & set object - fit