Adjust element to an aspect ratio based on height or width. Get in touch and follow me at twitter http://twitter.com/makk_eightbit! Thank you!

adjustToAspectRatio.js

/**
 * @author Marco Bunge <[email protected]>
 * @copyright 2015 Marco Bunge http://marco-bunge.de
 * @licence MIT http://opensource.org/licenses/MIT
 * 
 * Get in touch and follow me at twitter http://twitter.com/makk_eightbit! Thank you!
 *
 * Adjust element to an aspect ratio based on height or width.
 * Default aspect ratio is 16:9 (tv)
 * Usage:
 *
 * $('.myElement').adjustToAspectRatio({format: 'portrait'});
 *
 * Options:
 * format: choose porttrait or landscape
 * aspectRatio: could be an string or an float (self calculated value)
 *  - cinema (16:10)
 *  - tv (16:9)
 *  - classic (4:3)
 *  - classic-photo (3:2)
 *  - DinA (1:sqrt(2))
 *  onBefore: callback which will executed before plugin will executed
 *  onAfter: callback which will executed after plugin has been executed
 */
(function (jq, undefined) {

    var PLUGIN_NAME = 'adjustToAspectRatio';

    jq.adjustToAspectRatio = function (element, options) {
        var plugin = this,
            LANDSCAPE_FORMAT = 'landscape',
            PORTRAIT_FORMAT = 'portrait',
            jqElement = jq(element);

        plugin.settings = {};
        plugin.ratios = {
            'cinema': 16 / 10,
            'tv': 16 / 9,
            'classic': 4 / 3,
            'classic-photo': 3 / 2,
            'DinA': 1 / Math.sqrt(2)
        };

        var defaults = {
            onBefore: function (element, options) {
            },
            onAfter: function (element, options) {
            },
            format: LANDSCAPE_FORMAT, //landscape or portrait
            aspectRatio: plugin.ratios.tv
        };

        plugin.init = function () {
            plugin.settings = jq.extend({}, defaults, options);
            plugin.settings.onBefore(element, options);
            var format = plugin.settings.format,
                aspectRatio = plugin.settings.aspectRatio,
                ratio,
                metric,
                aspectSize;

            switch (format) {
                case LANDSCAPE_FORMAT:
                    metric = jqElement.width();
                    break;
                case PORTRAIT_FORMAT:
                    metric = jqElement.height();
                    break;
            }

            switch (jq.type(aspectRatio)) {
                case 'string':
                    ratio = plugin.ratios.hasOwnProperty(aspectRatio) ? plugin.ratios[aspectRatio] : plugin.ratios.cinema;
                    break;
                case 'number':
                    ratio = aspectRatio;
                    break;
            }

            aspectSize = parseInt(metric / ratio);

            switch (format) {
                case LANDSCAPE_FORMAT:
                    jqElement.height(aspectSize);
                    break;
                case PORTRAIT_FORMAT:
                    jqElement.width(aspectSize);
                    break;
            }

            plugin.settings.onAfter(element, options);
        };
        plugin.init();
    };

    jq.fn.adjustToAspectRatio = function (options) {
        return this.each(function () {
            var self = jq(this);
            if (undefined == self.data(PLUGIN_NAME)) {
                var plugin = new jq.adjustToAspectRatio(this, options);
                self.data(PLUGIN_NAME, plugin);
            }
        });
    };

})(jQuery);