CSS: Design responsive applicato alle immagini [Lotar's Wiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

====== 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,

<code css>
.img-responsive {
  max-width: 100%;
  height: auto;
}
</code>

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

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

===== Esempio =====

{{http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png|HTML5 Logo}}

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

Buon divertimento!

{{tag>programming html css responsive}}