Lavorando su pagine statiche il problema è facilmente risolvibile creando immagini con dimensioni corrette, quando ci si trova però in un contesto dinamico occorre confrontarsi con i limiti dell’applicativo web che fornisce i contenuti.

Molti cms mettono a disposizione un resize automatico delle immagini caricate e creano “al volo” un’anteprima senza che l’utente debba caricare due immagini di dimensioni diversa. Quando questo non è possibile è utile valutare una soluzione lato client che utilizzi html e css.

Le immagini sono elementi rimpiazzati, questo significa che hanno dimensioni proprie, un’immagine troppo grande può compromettere seriamente il nostro layout se non gestiamo correttamente le sue dimensioni nella pagina.

Definire ad esempio una larghezza o un’altezza standard è già sufficiente per gestire la thumbnail nel layout

/*mettiamo la larghezza*/
img{width:200px;}
/*o in altenativa settiamo l'altezza*/
img{height:300px;}

Settare una delle due dimensioni implica che questa verrà mantenuta mentre l’altra verrà calcolata in proporzione alle dimensioni dell’immagine, evitando così che venga distorta.

Se settiamo entrambe le dimensioni questa risulterà schiacciata o allungata

img{height:300px;width:200px;}

Questo effetto è abbastanza sgradevole è quindi consigliabile evitare di settare entrambe le proprietà. E’ inoltre utile ricordare di utilizzare un piccolo trucco per internet explorer nel caso di resize dell’immagine.

 img{-ms-interpolation-mode: bicubic;}

Questo piccolo accorgimento permette di mantenere una buona qualità dell’immagine sottoposta a resize in Internet Explorer 6 e 7 andrebbe quindi aggiunta alle regole di format del proprio css.

L’ultima soluzione che propongo è invece da utilizzare in casi estremi dove l’input dell’utente non viene gestito e non abbiamo a disposizione resize o taglio delle immagini a priori.

Questo sistema consiste nell’inserire l’immagine in un div al quale definiremo larghezza altezza e overflow:hidden; e all’immagine al suo interno una larghezza o un’altezza impostata.

div{width:100px;height:200px;overflow:hidden;}
img{height:200px;}

Questo metodo ci permette di utilizzare il div come una maschera e di utilizzare anche immagini più grandi senza compromettere il layout.

VEDI ESEMPIO

Pensando di lavorare lato client sulle thumbnail potremmo anche adottare soluzioni che implicano l’uso di javascript o canvas, senza dubbio una soluzione tramite css rimane poco invasiva e sempre accessibile.