WillSquire
6/3/2016 - 1:46 PM

Aspect ratio

Aspect ratio

/**
 * Sets element to given aspect ratio.
 *
 * @example
 * var aspect_ratio_16to9 = $('.aspect-ratio-16to9');
 *
 * // Initial ratio set
 * aspect_ratio(aspect_ratio_16to9, 16, 9);
 *
 * // Update ratio set on resize
 * $(window).resize(function() { aspect_ratio(aspect_ratio_16to9, 16, 9); });
 *
 * @TODO Remove dependency on jQuery (have both jQuery and vanilla versions available at runtime)
 *
 * @param element
 * @param width
 * @param height
 */
export default function aspect_ratio(element, width, height) {
    var element_width = parseInt(element.css('width'));
    var height_ratio = height / width;// i.e. 16:9 aspect ratio == 0.5625
    element.css('height', element_width * height_ratio);
}