CSS  »  Articoli  »  Effetti con CSS 

Dimensionare le immagini in em

Nei CSS gli em sono vere e proprie unità di misura, e per quanto riguarda le immagini un em corrisponde alla dimensione attuale del font dell'elemento in cui sono immerse. Usando il dimensionamento relativo dei font e il dimensionamento elastico per immagini, è possibile ridurre al minimo (o annullare) lo sgranamento delle immagini con la dimensione del carattere del browser di default oppure impostato sul valore "medio" nel caso di Internet Explorer. L'accortezza da usare è fare in modo che l'immagine risulti alle sue dimensioni naturali con il carattere di default.

Nel quarto esempio c'è un'immagine float elastica che si presenta a dimensioni naturali con il carattere di default. Vediamo come sia possibile: il font-size del body è pari al 100.01%, a cui corrisponde un font-size attuale di 16 pixel. Per ottenere la larghezza dell'immagine in em, basterà dividere la sua larghezza reale (372 pixel) per il font-size attuale dell'elemento che la contiene: il calcolo da fare è quindi 372 diviso 16, ottenendo un valore di 23.25em. Ed è proprio questa la larghezza dell'immagine impostata nell'esempio. Ecco il codice:

Analogamente, si è specificata una larghezza in em per il quinto esempio, in cui il font-size di base è del 76% a cui corrisponde un carattere di 12px con il carattere di default:

In questi ultimi due esempi è da notare come l'immagine si presenta normalmente ben definita e i contorni appaiono sgranati intervenendo sul carattere del browser.

Conclusioni

Abbiamo visto in questo articolo come un adeguato dimensionamento adeguato delle immagini possa arricchire le nostre pagine, oltre che renderle più gradevoli e usabili. La compatibilità degli esempi è buona, dato che il dimensionamento in percentuale ed in em è supportato su tutti i browser moderni. Codice e immagini sono disponibili per il download. Alla prossima.

Altri articoli

Altre guide

Altre newsletter