Già da diverso tempo mi sono imbattuto nella tecnica jQuery per avere immagini proporzionali a tutto schermo. Di seguito vorrei condividere una soluzione che ho trovato utile.
In pratica si tratta di avere come riferimento l'altezza e la larghezza della finestra del browser e di applicare delle semplici formule per il calcolo della proporzione:
(function($) {
$.fn.fullscreenImage = function() {
var resize = function(img) {
var imgwidth = img.width(),
imgheight = img.height(),
winwidth = $(window).width(),
winheight = $(window).height(),
widthratio = winwidth / imgwidth,
heightratio = winheight / imgheight,
widthdiff = heightratio * imgwidth,
heightdiff = widthratio * imgheight;
if (heightdiff > winheight) {
img.css({
width: winwidth + 'px',
height: heightdiff + 'px'
});
} else {
img.css({
width: widthdiff + 'px',
height: winheight + 'px'
});
}
};
return this.each(function() {
var $img = $(this);
resize($img);
});
};
})(jQuery);
In questo modo si evita che le immagini appaiano deformate se si utilizzano i soli CSS.