Come creare: immagine responsive

Impara come creare un'immagine responsive utilizzando CSS.

L'immagine responsive si adatterà automaticamente alla dimensione dello schermo.

Modifica la dimensione della finestra del browser per visualizzare l'effetto responsiveness:

Luce

Visualizza l'effetto

Come creare un'immagine responsive

Primo passo - Aggiungi HTML:

<img src="nature.jpg" alt="Natura" class="responsive">

Secondo passo - Aggiungi CSS:

Se si desidera che l'immagine responsive possa essere sia ingrandita che ridotta, impostare CSS larghezza Proprietà impostata su 100%,altezza impostare auto:

Esempio

.responsive {
  larghezza: 100%;
  altezza: auto;
}

Prova personalmente

Se si desidera che l'immagine si riduca quando necessario, ma non si ingrandisca oltre la sua dimensione originale, utilizzare larghezza_massima: 100%:

Esempio

.responsive {
  larghezza_massima: 100%;
  altezza: auto;
}

Prova personalmente

Se si desidera limitare l'immagine responsive alla dimensione massima, utilizzare larghezza_massima Proprietà e il valore di pixel scelto:

Esempio

.responsive {
  larghezza: 100%;
  larghezza_massima: 400px;
  altezza: auto;
}

Prova personalmente

Pagina relativa

Tutorial:Immagine CSS

Tutorial:CSS Progettazione web responsive