CSS  »  Articoli  »  Effetti con CSS 

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:

Se vuoi aggiornamenti su Immagini liquide ed elastiche inserisci la tua e-mail nel box qui sotto:

Altri articoli

Altre guide

Altre newsletter