jQuery: rendere un elemento responsive

Con jQuery possiamo facilitare la realizzazione di layout responsive con facilità.

Si tratta sostanzialmente di calcolare la larghezza in percentuale di un elemento rispetto al suo contenitore. Tale valore si ottiene dividendo la larghezza calcolata dell'elemento per la larghezza calcolata del genitore e moltiplicando il risultato per 100.

(function( $ ) {
    $.fn.responsive = function() {
        return this.each(function() {
            var $element = $( this ),
                $parent = $element.parent(),
                elWidth = $element.outerWidth(),
                parWidth = $parent.outerWidth(),
                width = ( elWidth / parWidth ) * 100;
                
                $element.css( "width", width.toFixed( 4 ) + "%" );
        });
    };
})( jQuery );

Esempio d'uso:

$(function() {
    $( "video" ).responsive();
});