Ridimensionamento automatico delle immagini

Recentemente mi sono trovato a dovere risolvere un piccolo problema pratico relativo alla gestione di immagini inserite in pagine web: la necessità di adattare le proporzioni delle immagini in occasione dell’eventuale ridimensionamento della finestra del browser.immagini liquide web
In pratica, a causa della presenza di diversi elementi nella stessa pagina, lo spazio occupato da una immagine è adatto se la finestra di visualizzazione è piuttosto ampia, ma si rivela eccessiva se si decide di rimpicciolire la finestra. La soluzione perfetta sarebbe quella di avere un’immagine più piccola. Ma come fare a renderla attiva a seconda delle necessità ?
Invece di avere immagini diverse a seconda delle dimensioni di visualizzazione, l’idea è quella di adottare un design ‘liquido’ per il sito web, ovvero la possibilità di adattarsi alla dimensione della finestra del browser. In questo caso è l’immagine ad essere ‘liquida’ dato che è questa ad adattarsi alle dimensioni di visualizzazione.

Ecco come fare:
nel foglio di stile si inserisce una specifica regola, come la seguente, dove l’elemento chiave è ovviamente la caratteristica ‘100%’ attribuita alla larghezza, mentre ‘auto’ utilizzata per l’altezza permette di mantenere le proporzioni corrette

#foto {
width: 100%;
height: auto;
}

dopodichè è sufficiente specificare l’uso della regola quando si referenzia l’immagine, come segue

<img src=”immagine.jpg” id=”foto” />

e il gioco è fatto.

Lascia il tuo commento