Salve a tutti, abbiamo delle specifiche piuttosto restrittive e non se ne riesce a venire a capo...

In pratica devo fare in modo che le immagini della home page si ridimensionino sempre ad ogni ridimensionamento del browser, cosa piuttosto facile direte voi, basta usare l'evento resize.
Eh no, invece, non è così semplice perchè la prima riga di immagini deve sempre vedersi ad ogni ridimensionamento della finestra e deve sempre vedersi anche una porzione della seconda riga di immagini. Inoltre NON è possibile utilizzare le percentuali per il ridimensionamento in quanto tra ogni immagine è indispensabile che ci sia un margine sempre costante di 20px...

Al momento siamo riusciti a scrivere solo una funzione che viene richiama all'interno dell'evento resize che fa all'incirca quanto richiesto però ci sono degli errori di margini quando si ridimensiona la finestra e si ha che l'altezza e la lunghezza della finestra sono uguali per via della barra di scroll che porta via circa 20px che non riusciamo a gestire e quindi si ha un fastidioso scatto ed una rientranza nel browser della prima immagine della riga.

Questo quanto sviluppato sin ora:

codice:
	function resize() {

		var altezzaAreaVisibile = altezzaHeader + $contenitoreRiga1.height() + tolleranza + altezzaFooter;
		var altezzaFinestra = $window.height() - altezzaFooter;

		if (altezzaAreaVisibile <= altezzaFinestra) {
			var margin = altezzaFinestra - altezzaAreaVisibile;
			$contenitori.each(function (index) {
				var aumentoLarghezza = ((margin / divisori[index]) * 2) - (20 / divisori[index]);
				$(this).find("img").css("width", ($(this).width() + aumentoLarghezza) + "px" );
				$(this).css("width", parseInt($(this).css("width").replace("px", "")) + aumentoLarghezza + "px");
			});
			$wrapper.css({
				"margin-left": parseInt($wrapper.css("margin-left").replace("px", "")) - margin + "px",
				"margin-right": parseInt($wrapper.css("margin-right").replace("px", "")) - margin + "px"
			});
		} else {
			var margin = altezzaAreaVisibile - altezzaFinestra;
			$contenitori.each(function (index) {
				var aumentoLarghezza = ((margin / divisori[index]) * 2) - (20 / divisori[index]);
				$(this).find("img").css("width", ($(this).width() - aumentoLarghezza) + "px" );
				$(this).css("width", parseInt($(this).css("width").replace("px", "")) - aumentoLarghezza + "px");
			});
			$wrapper.css({
				"margin-left": parseInt($wrapper.css("margin-left").replace("px", "")) + margin + "px",
				"margin-right": parseInt($wrapper.css("margin-right").replace("px", "")) + margin + "px"
			});
		}

		if ($contenitoreRiga1.width() >= $window.width()) {
			$contenitori.each(function (index) {
				var aumentoLarghezza = (parseInt($window.width()) / divisori[index]) - 20;
				$(this).find("img").css("width", aumentoLarghezza + "px" );
				$(this).css("width", aumentoLarghezza + "px" );
			});
			$wrapper.css({
				"margin-left": "0px",
				"margin-right": "0px"
			});
		} else {
			var margin = (($window.width() - $contenitoreRiga1.width()) / 2) - 20;
			$wrapper.css({
				"margin-left": margin + "px",
				"margin-right": margin + "px"
			});
		}
	}
$wrapper è la variabile che contiene il DOM del wrapper.
$contenitori è la variabile contiene tutti gli elementi del DOM dove ci sono le immagini!

Qualche suggerimento? Qualche plugin funzionante che conoscete? Cross-browser magari...