javascript: ridimensionare le immagini mantenendo le proporzioni

[b][code]

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à:


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;
}
}


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