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.
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.