Resize media (video or image) to imitate 'background cover' or 'background contain' behaviour in JavaScript

MediaResizer.js

define([
  'jquery',
  'underscore',
  'brewser'
],

  function(
    $,
    _,
    brewser
  ) {

    'use strict';

    var instance = null;

    function MediaResizer() {
      if(!!!instance){
        instance = this;
      }
      return instance;
    };

    MediaResizer.prototype = {
      /**
       * Resize media to cover the box
       *
       * @param {Object}  options
       * @param {Number}  options.$el             The element to be resized
       * @param {Number}  options.elWidth         The original width of the media
       * @param {Number}  options.elHeight        The original height of the media
       * @param {Boolean} options.boxWidth        The width of the box
       * @param {Boolean} options.boxHeight       The height of the box
       * @param {Boolean} options.padding         Padding
       * @param {Boolean} options.scale           Adds extra scale
      */
      fitToBox: function(options) {
        if(!_.size(options)) {
          console.error('[MediaResizer] - missing some arguments for proper resize, quitting.');
          return;
        }
        
        // Calculate the image dimensions based on the window dimensions
        var $el = options.$el;
        var scale = options.scale || 1;
        var naturalWidth = options.elWidth;
        var naturalHeight = options.elHeight;
        var padding = options.padding || 0;
        var boxWidth = options.boxWidth - padding * 2;
        var boxHeight = options.boxHeight - padding * 2;
        var elWidth = Math.ceil(boxWidth);
        var dimensionRatio = naturalWidth / naturalHeight;
        var elHeight = Math.ceil(elWidth / dimensionRatio);

        if(boxWidth / boxHeight < dimensionRatio) {
          elHeight = Math.ceil(boxHeight);
          elWidth = Math.ceil(elHeight * dimensionRatio);
        }

        // Multiply the calculated values (to cover off gaps around edges for instance)
        elWidth *= scale;
        elHeight *= scale;

        elWidth = Math.round(elWidth);
        elHeight = Math.round(elHeight);

        $el.css({
          'position': 'absolute',
          'top': '50%',
          'left': '50%',
          'width': elWidth,
          'height': elHeight,
          'margin-top': Math.round(elHeight * -0.5),
          'margin-left': Math.round(elWidth * -0.5)
        });
      },

      /**
       * Resize media to contain within the box
       *
       * @param {Object}  options
       * @param {Number}  options.$el             The element to be resized
       * @param {Number}  options.elWidth         The original width of the media
       * @param {Number}  options.elHeight        The original height of the media
       * @param {Boolean} options.boxWidth        The width of the box
       * @param {Boolean} options.boxHeight       The height of the box
       * @param {Boolean} options.padding         Padding
       * @param {Boolean} options.scale           Adds extra scale
      */
      containInBox: function(options) {
        if(!_.size(options)) {
          console.error('[MediaResizer] - missing some arguments for proper resize, quitting.');
          return;
        }
        
        // Calculate the image dimensions based on the window dimensions
        var $el = options.$el;
        var scale = options.scale || 1;
        var naturalWidth = options.elWidth;
        var naturalHeight = options.elHeight;
        var padding = options.padding || 0;
        var boxWidth = options.boxWidth - padding * 2;
        var boxHeight = options.boxHeight - padding * 2;
        var elWidth = Math.ceil(boxWidth);
        var dimensionRatio = naturalWidth / naturalHeight;
        var elHeight = Math.ceil(boxWidth / dimensionRatio);

        var minElWidth = options.minElWidth || 480;
        var minElHeight = options.minElHeight || 270;

        if(elHeight > boxHeight) {
          elHeight = Math.ceil(boxHeight);
          elWidth = Math.ceil(elHeight * dimensionRatio);
        }

        // Multiply the calculated values (to cover off gaps around edges for instance)
        elWidth *= scale;
        elHeight *= scale;

        if(elWidth < minElWidth || elHeight < minElHeight) {
          elWidth = minElWidth;
          elHeight = minElHeight;
        }

        elWidth = Math.round(elWidth);
        elHeight = Math.round(elHeight);

        $el.css({
          'position': 'absolute',
          'top': '50%',
          'left': '50%',
          'width': elWidth,
          'height': elHeight,
          'margin-top': Math.round(elHeight * -0.5),
          'margin-left': Math.round(elWidth * -0.5)
        });
      }
    };

    return MediaResizer;
  }
);