Immagini in percentuale con i CSS: i dettagli

Una tecnica che ha preso piede dopo l'ottimo lavoro di Gianluca Troiani è l'utilizzo di dimensioni percentuali nel CSS per determinare il layout delle immagini. Questa tecnica richiede due passaggi:

1. trasformazione dell'immagine in un elemento di blocco;
2. dichiarazione di una larghezza in percentuale per l'immagine.

Esempio:

#extra {
  width: 250px;
}
#extra img {
  display: block;
  width: 100%;
}

In questo caso abbiamo un contenitore a larghezza fissa. Tuttavia, la tecnica può essere utilizzata anche quando il contenitore dell'immagine ha una larghezza fluida (in percentuale, per esempio):

#extra {
  width: 20%;
}
#extra img {
  display: block;
  width: 100%;
}

Il problema maggiore di questa tecnica sta nel fatto che le immagini hanno delle dimensioni intrinseche ed un rapporto (ratio) tra altezza e larghezza che i CSS non possono né modificare né mantenere invariato cambiando le dimensioni delle immagini. In altre parole: l'immagine si mostrerà  ad una qualità  accettabile solo se le sue dimensioni intrinseche sono uguali o maggiori del contenitore che andrà  ad ospitarle. Nel primo esempio, l'immagine dovrà  avere una larghezza pari o superiore a 250px. In caso contrario, la qualità  dell'immagine apparirà  deteriorata e la sua visualizzazione ne risentirà .

Il secondo esempio è più complesso: poiché i browser convertono sempre in fase di rendering le percentuali in pixel, occorrerà  verificare a quanto esattamente corrisponda la misura 20%, ovviamente tenendo conto delle diverse risoluzioni del monitor.

In definitiva, questa tecnica è molto interessante, ma affinché funzioni al meglio sono necessari dei prerequisiti che vanno attentamente valutati.