Immagini scalabili

Ci sono diversi modi per far si che le nostre immagini si adattino perfettamente alle dimensioni del supporto in cui devono apparire. Possiamo usare la percentuale, usare gli “em” anzichè i “px”, creare procedure javascipt per elaborare le dimensioni e restituire le giuste proporzioni…
Ma molto più semplicemente possiamo ridimensionare o meglio “rendere scalabili” le nostre immagini attraverso i CSS.
Vediamo che tipo di tecnica dobbiamo adottare per creare delle immagini perfettamente adattabili ad ogni dimensione.

Per prima cosa creiamo una classe che poi assegneremo ad ogni elemento immagine.
Nella classe indichiamo la classica proprietà “width”, impostandola al massimo della sua grandezza: “width : 100%;” .
Questo consentirà alla nostra immagine, di adattarsi alla dimensione dello schermo, mantenendo le proporzioni con il resto della pagina.
Purtroppo questo sistema presenta anche un piccolo inconveniente: se allarghiamo al massimo la pagina, qualora le dimensioni dell’immagine fossero medio-piccole, si allargherebbe ben oltre il suo 100% sgranando e sfocando.
Possiamo utilizzare allora un altro sistema, ce ci permette di consentire l’elasticità del comenaod “width”, ma senza ilproblema dello sforamento delle dimensioni.

All’interno della classe inseriamo le proprietà “max-width : 100%;” .
Cosi facendo, ci assicuriamo l’elasticità dell’immagine che comunque non potrà mai superare il massimo delle sue dimensioni, evitando di sgranare e sfocare per l’eccessivo ingrandimento.

//nel foglio CSS
     
.img{
   width : 100%;
   max-width : 100%;
   height : 100%;

}