:: FILOWEB.it: Ridimensionare le immagini in proporzione

 
		In questo articolo illustrerò un semplice script in javascript per il ridimensionamento delle immagini, che esse siano orizzontali o verticali e manterranno le proporzioni originali.



Lo script è molto semplice. La funzione sarà:





<html>

<head>

<script language=" javascript" >





function img_rid(id, largh, alt) {



	//ricavo la larghezza e altezza originali

        var largh_or = document.getElementById(id).width;

	var alt_or = document.getElementById(id).height;

        

	// se è orrizontale o quadrata

	if(largh_or >= alt_or) {

		var alt_new = largh * alt_or / largh_or;

		document.getElementById(id).width = largh;

		document.getElementById(id).height = alt_new;

	}



	// se è verticale

	else if(alt_or > largh_or) {

		var largh_new = largh_or * alt / alt_or;

		document.getElementById(id).width = largh_new;

		document.getElementById(id).height = alt;

	}

}

</script>



Questa è la funzione javascript, molto semplice ed essenziale.

Ora passiamo all' HTML:







<img id=" id_img"  onLoad=" img_rid(' id_img' , ' 600' , ' 400' )"  src=" http://www.esempio.it/immagine.jpg"  />





Anche qui il codice è molto semplice, studiamo bene la funzione img_rid e i suoi argomenti.

Il primo argomento si riferisce all' id dell' immagine da ridimensionare, il secondo alla larghezza massima, espressa in px, che voi volete che abbia l' immagine (orizzontale) e il terzo argomento all' altezza massima che può avere l' immagine se questa sarà verticale.



se avete dubbi scrivete pure nei commenti

ciao ciao