CSS: Design responsive applicato alle immagini

Oggigiorno fare un sito “responsive” vuol dire dare la possibiltà a persone che visitano il proprio sito di adattare il layout alla grandezza del display del dispositivo (table, smartphone, etc).

Immaginate di avere un sito con delle stupende immagini che occupano quasi tutto lo schermo. Come possiamo adattarle allo schermo di uno smartphone senza che il visitatore scorra tutto lo schermo con le dita per visualizzarle?

Nulla di più semplice, basta una semplice classe CSS,

.img-responsive {
  max-width: 100%;
  height: auto;
}

da richiamare tramite l'attributo class del tag <img/>:

<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"
  alt="HTML5 Logo"
  class="img-responsive" />

Adesso proviamo a restringere la finestra del broweser per una semplice prova. Non crederete ai propri occhi!

Buon divertimento!