Immagini liquide ed elastiche

Le immagini sono un aspetto fondamentale di un sito e poterle gestire al meglio
è importante. In particolare, l'integrazione di immagini in design liquidi o elastici
può risultare piuttosto difficile all'apparenza, ma con dei piccoli accorgimenti
potremo fare in modo che esse risultino in perfetta armonia con
queste tipologie di layout, senza correre il rischio che danneggino
l'intera impaginazione del sito. Cominciamo subito con le immagini liquide, per poi vedere nella seconda parte (online tra sette giorni) le immagini elastiche.

Immagini liquide

Un sito è liquido quando, in una certa misura, scala al variare della finestra
del browser. Quello che vorremmo è poter ottenere questo comportamento anche per
le immagini. Niente di più semplice in realtà! Invece di non specificare
le dimensioni per l'immagine (o specificarle in px) basterà impostare una larghezza
percentuale: in maniera totalmente automatica e trasparente la larghezza
dell'immagine verrà calcolata dal browser, e l'altezza sarà tale da mantenere
la proporzionalità delle dimensioni originali.

Eccoci al primo esempio, in cui un'immagine di dimensione originale 450 per 337 pixel
è immersa in una colonna liquida larga il 50% della finestra del browser. Come si
può notare, l'immagine occupa la larghezza dell'intera colonna, indipendentemente
dalla larghezza della finestra del browser. Questo effetto è molto semplice: basta
impostare nel CSS una larghezza pari al 100%. Per prima cosa, vediamo l'HTML: all'immagine
è stata attribuita una classe "widepic" così da definirne la tipologia:

Ovviamente, qualora l'immagine a larghezza 100% fosse solo una o volessimo
controllare le immagini una per una, è possibile anche usare l'attributo di id
invece delle classi. Veniamo ora al CSS chiave dell'esempio,
composto da due semplicissime dichiarazioni:

Da notare come l'immagine risulti più sgranata o poco definita tanto più è lontana
dalle sue dimensioni originali: si tratta di un problema a cui non è possibile ovviare,
ma in casi reali molto probabilmente non subirebbe una variazione di larghezza così ampia.

Nel secondo esempio la nostra immagine ha un bordo fine
attorno. Per ottenerlo è in questo caso praticamente indispensabile un div
che faccia da contenitore all'immagine stessa. In questo caso la classe "widepic"
è stata spostata al div contenitore nel markup:

Nel CSS del secondo esempio, bordi e padding verranno
applicati al div contenitore, e l'immagine avrà larghezza impostata pari al 100%:

In maniera del tutto analoga possiamo ottenere immagini float che occupano
in realtà una porzione della larghezza del loro contenitore: è il caso del terzo esempio,
a cui abbiamo attribuito la classe "sidepic" all'immagine:

Il CSS è piuttosto semplice: basta rendere float l'immagine, specificarne larghezza, bordi e padding
e margini per separare un po' il testo che la circonda:

Da notare come in questo caso il fatto che l'immagine sia liquida aiuta moltissimo la disposizione
circostante del testo al variare della larghezza della finestra del browser.

Immagini elastiche

Abbiamo visto come le immagini liquide abbiano la capacità di adattarsi al variare della larghezza del loro
contenitore, che in un design liquido è condizionato dalla finestra del browser grazie al dimensionamento percentuale.
Un simile comportamento è ottenibile facilmente anche nel design elastico, senza sostanziali variazioni:
le immagini dimensionate in percentuale saranno anche in questo caso assoggettate al layout, la cui grandezza
però è funzione del font-size associato.

Vediamo quindi le nostre immagini liquide immerse in una colonna elastica. Nel primo esempio,
in cui il container è largo 40em e l'immagine è larga il 100%, si nota benissimo come, ridimensionando la
dimensione del carattere del browser, l'intera colonna si ridimensiona, e l'immagine la segue perfettamente:

Allo stesso modo dell'esempio liquido, è possibile poi ottenere un'immagine elastica con bordo
e larghezza pari al 100%. Anche in questo, tra le due versioni a cambiare è soltanto la dimensione del container:
nel layout liquido è impostata in percentuale mentre in quello elastico è dimensionata in em.

L'impostazione delle dimensioni in percentuale è adeguata infine anche per ottenere un effetto elastico su
immagini float, come nel terzo esempio:

Ci sono però alcuni casi in cui il dimensionamento
elastico per le immagini risulta più adeguato di quello percentuale. Vediamo quali.

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.