Le immagini sono un aspetto fondamentale di un sito, e può risultare a volte difficile adattarne la grandezza in accordo con il testo, integrarle in un layout liquido o confinarle in uno spazio limitato per una thumbnail. Segnalo volentieri alcune risorse che potranno risultarvi utili in questi casi.
La prima è Create Resizable Images With CSS (con il relativo esempio) di Christian Watson, che combina il dimensionamento in em, l'overflow e i margini negativi per ottenere immagini a dimensioni variabile a seconda del font-size
ma di cui viene sempre mostrata una porzione a grandezza naturale effettiva.
Da notare che l'implementazione è ben diversa dalle immagini elastiche, presentate
in Elastic Design
(qui la demo).
Per adattare immagini ai layout liquidi, Richard Rutter ha presentato circa
tre anni e mezzo fa Images in liquid columns che è una lettura tuttora attuale.
Per gestire le immagini thumbnails, un quarto modo si aggiunge ai tre che ho presentato non molto tempo fa in Gallerie di miniature non omogenee:
si tratta di Creating Thumbnails Using the CSS Clip Property che, come dice il titolo, usa la proprietà clip per tagliare la parte eccedente dell'immagine.
Una nota è doverosa: la proprietà clip richiede che le coordinate siano separate da una virgola, e la tecnica suggerita senza le virgole non passa il test del validatore CSS. Una possibile soluzione potrebbe essere esprimere la proprietà clip con la virgola, come definito nelle specifiche CSS, per poi servire la dichiarazione senza virgole esclusivamente a IE attraverso il commento condizionale.
