Dopo aver visto un'introduzione al responsive web design e studiato le griglie fluide, vediamo come le immagini possono far parte di questa nuova concezione del web. Infatti, in modo semplicissimo, anche le immagini possono diventare accessibili per tutti i dispositivi.

Infatti, dopo aver dimensionato il nostro layout utilizzando la percentuale, perchè non sfruttare questa unità di misura relativa anche per le immagini?

img {

max-width:100%;

}

Avete capito bene, è tutto qui. La proprietà max-width ci consente di non storpiare l'immagine rendendola troppo grande su dispositivi ad alta risoluzione, ma quando invece il suo contenitore diventa troppo piccolo per contenerla... magia, verrà rimpicciolita (proporzionalmente) anch'essa.

Provate voi stessi, riducendo la finestra del browser su questa pagina!

In realtà, versioni di IE non supportano correttamente questa proprietà. E proprio per chi non volesse lasciarsi sfuggire niente, vi rimando all'articolo orginale dal genio di Ethan Marcotte dove l'argomento IE viene approfondito come si deve.