Filoweb.it

Ridimensionare le immagini in proporzione


FB TW whatsapp RSS FEED News letter
Javascript
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
FB TW whatsapp RSS FEED News letter

filoweb.it è il sito personale di Filippo Brunelli
(c) 2017 Filippo Brunelli
Le immagini ed i testi contenuti nel sito filoweb.it sono di proprietà di Filippo Brunelli salvo diversamente indicato.
L'uso delle immagini e del testo è gratuito per uso personale ed è subbordinato alla citazione della fonte.
Brunelli Filippo declina ogni responsabilità per l'uso che viene fatto delle informazioni presenti nel sito filoweb.it.
FILOWEB.it Piccolo quaderno degli appunti. Argomento: Javascript, Titolo:Ridimensionare le immagini in proporzione. Altri script riguardano: CSS, Jscript, .net, Classic Asp, HTML, Jquery, varie, url rewrite, pagina protetta da password, ecc. Altro su https://www.filoweb.it