jQuery: ridimensionare le immagini in base alle dimensioni della finestra del browser

Vi sarà certamente capitato di dover effettuare il ridimensionamento delle immagini con jQuery quando la finestra del browser cambia le sue dimensioni. Il problema maggiore è quello di riportare le immagini alla loro dimensione originaria quando la finestra del browser ritorna alle dimensioni normali.

Usando l'evento ready() possiamo memorizzare le dimensioni iniziali della finestra come attributi di dati HTML5:

$(function() {
	var origWindowWidth = $(window).width();
	var origWindowHeight = $(window).height();
	
	$('body').attr({
		'data-viewport-width': origWindowWidth,
		'data-viewport-height': origWindowHeight
	});
});

Ora l'elemento body conserva le dimensioni originali della finestra. A questo punto dobbiamo fare in modo che anche ciascuna immagine memorizzi le sue dimensioni originali. Dato che durante l'evento resize le dimensioni cambieranno, possiamo utilizzare l'evento load delle immagini per memorizzare questi dati.

Per far questo dobbiamo tenere presente che il browser dispone solo delle dimensioni intrinseche dell'immagine a meno che noi non abbiamo specificato tali dimensioni con gli attributi width e height o tramite CSS:

$('img').on('load', function() {
	var $img = $(this);
	var width = $img.outerWidth();
	var height = $img.outerHeight();
	
	$img.attr({
		'width': width,
		'height': height,
		'data-orig-width': width,
		'data-orig-height': height
	});
});

A questo punto le nostre immagini si presenteranno così nel DOM:

<img src="image.png" alt="" width="400" height="300" data-orig-width="400" data-orig-height="300"/>

Appare chiaro che i due attributi custom serviranno a ripristinare le dimensioni originarie quando la finestra tornerà normale. A questo punto possiamo utilizzare il plugin jQuery Image Resize solo quando le dimensioni della finestra sono diverse da quelle originarie:

$(window).on('resize', function() {

	var winWidth = $(window).width();
	var winHeight = $(window).height();
	var origWinWidth = $('body').data('viewport-width');
	var origWinHeight = $('body').data('viewport-width');
	
	$('img').each(function() {
		var $img = $(this);
		
		if(winWidth != origWinWidth || winHeight != origWinHeight) {
			$img.resize({
				maxWidth: winWidth,
				maxHeight: winHeight,
				scale: 0.8
			});
		} else {
			// Ripristina le dimensioni delle immagini
			$img.attr({
				width: $img.data('orig-width'),
				height: $img.data('orig-height')
			});	
		}
	
	
	});

});

La procedura è molto semplice ed estremamente efficace.