Skip to content

Instantly share code, notes, and snippets.

@mbunge
Created March 11, 2015 14:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mbunge/396bf6dbe02718f26834 to your computer and use it in GitHub Desktop.
Save mbunge/396bf6dbe02718f26834 to your computer and use it in GitHub Desktop.
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!
/**
* @author Marco Bunge <marco_bunge@web.de>
* @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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment