Filoweb.it

Ridimensionare le immagini in proporzione


FB TW G+ 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 G+ 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 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 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