Immagini in percentuale con i CSS.
Con questa semplice tecnica possiamo integrare immagini con grandezza in percentuale (liquide) in un sito con un layout anch'esso dimensionato in percentuale. Prendiamo ad esempio questo blog, controllando l'home-page le immagini dei post sono liquide, cioè si adattano al layout: entrambi, layout e immagini, variano proporzionalemente le proprie dimensioni a seconda della grandezza della finestra del browser.
L'immagine deve avere impostata nel CSS una larghezza pari al 100% e deve essere contenuta in un div con assegnata la larghezza voluta (sempre naturalmente espressa con valori percentuali). In questo modo l'immagine occupa l'intera larghezza del div in cui è contenuta, indipendentemente dalla larghezza della finestra del browser.Vedi l'esempio.
p.s. l'immagine utilizzata nell'esempio (dimensioni originali 600x400px) è uno tra gli scatti che ho fatto in vacanza a Zante in Grecia questa estate.
- Social:
L'html nel testo del commento è abilitato: i tag consentiti sono: a, em, strong, p, code, pre, quote e br.
Gli attributi dei tag utilizzabili sono title e href.