src/js/objectFitPolyfill/objectFitPolyfill.js
function(axis, $media, objectPosition) {
    var position, other, start, end, side;
    objectPosition = objectPosition.split(" ");

    if (objectPosition.length < 2) {
      objectPosition[1] = objectPosition[0];
    }

    if (axis === "x") {
      position = objectPosition[0];
      other = objectPosition[1];
      start = "left";
      end = "right";
      side = $media.clientWidth;
    }
    else if (axis === "y") {
      position = objectPosition[1];
      other = objectPosition[0];
      start = "top";
      end = "bottom";
      side = $media.clientHeight;
    }
    else {
      return; // Neither x or y axis specified
    }

    if (position === start || other === start) {
      $media.style[start] = "0";
      return;
    }

    if (position === end || other === end) {
      $media.style[end] = "0";
      return;
    }

    if (position === "center" || position === "50%") {
      $media.style[start] = "50%";
      $media.style["margin-" + start] = (side / -2) + "px";
      return;
    }

    // Percentage values (e.g., 30% 10%)
    if (position.indexOf("%") >= 0) {
      position = parseInt(position);

      if (position < 50) {
        $media.style[start] = position + "%";
        $media.style["margin-" + start] = side * (position / -100) + "px";
      }
      else {
        position = 100 - position;
        $media.style[end] = position + "%";
        $media.style["margin-" + end] = side * (position / -100) + "px";
      }

      return;
    }
    // Length-based values (e.g. 10px / 10em)
    else {
      $media.style[start] = position;
    }

  }
function(axis, $media, objectPosition) {
    var position, other, start, end, side;
    objectPosition = objectPosition.split(" ");

    if (objectPosition.length < 2) {
      objectPosition[1] = objectPosition[0];
    }

    if (axis === "x") {
      position = objectPosition[0];
      other = objectPosition[1];
      start = "left";
      end = "right";
      side = $media.clientWidth;
    }
    else if (axis === "y") {
      position = objectPosition[1];
      other = objectPosition[0];
      start = "top";
      end = "bottom";
      side = $media.clientHeight;
    }
    else {
      return; // Neither x or y axis specified
    }

    if (position === start || other === start) {
      $media.style[start] = "0";
      return;
    }

    if (position === end || other === end) {
      $media.style[end] = "0";
      return;
    }

    if (position === "center" || position === "50%") {
      $media.style[start] = "50%";
      $media.style["margin-" + start] = (side / -2) + "px";
      return;
    }

    // Percentage values (e.g., 30% 10%)
    if (position.indexOf("%") >= 0) {
      position = parseInt(position);

      if (position < 50) {
        $media.style[start] = position + "%";
        $media.style["margin-" + start] = side * (position / -100) + "px";
      }
      else {
        position = 100 - position;
        $media.style[end] = position + "%";
        $media.style["margin-" + end] = side * (position / -100) + "px";
      }

      return;
    }
    // Length-based values (e.g. 10px / 10em)
    else {
      $media.style[start] = position;
    }

  }
function ( axis , $media , objectPosition ) { var position , other , start , end , side ; objectPosition = objectPosition . split ( " " ) ; if ( objectPosition . length < 2 ) { objectPosition [ 1 ] = objectPosition [ 0 ] ; } if ( axis === "x" ) { position = objectPosition [ 0 ] ; other = objectPosition [ 1 ] ; start = "left" ; end = "right" ; side = $media . clientWidth ; } else if ( axis === "y" ) { position = objectPosition [ 1 ] ; other = objectPosition [ 0 ] ; start = "top" ; end = "bottom" ; side = $media . clientHeight ; } else { return ; // Neither x or y axis specified } if ( position === start || other === start ) { $media . style [ start ] = "0" ; return ; } if ( position === end || other === end ) { $media . style [ end ] = "0" ; return ; } if ( position === "center" || position === "50%" ) { $media . style [ start ] = "50%" ; $media . style [ "margin-" + start ] = ( side / - 2 ) + "px" ; return ; } // Percentage values (e.g., 30% 10%) if ( position . indexOf ( "%" ) >= 0 ) { position = parseInt ( position ) ; if ( position < 50 ) { $media . style [ start ] = position + "%" ; $media . style [ "margin-" + start ] = side * ( position / - 100 ) + "px" ; } else { position = 100 - position ; $media . style [ end ] = position + "%" ; $media . style [ "margin-" + end ] = side * ( position / - 100 ) + "px" ; } return ; } // Length-based values (e.g. 10px / 10em) else { $media . style [ start ] = position ; } }
Calculate & set object-position

@param {string} axis - either "x" or "y"
@param {node} $media - img or video element
@param {string} objectPosition - e.g. "50% 50%", "top bottom"
Calculate & set object - position