Progettazione del sito web reattivo - Immagini

Utilizza l'attributo width

Se width Se l'attributo è impostato come percentuale e l'altezza è impostata su "auto", l'immagine si adatterà automaticamente per ingrandirsi o ridursi:

Esempio

img {
  width: 100%;
  height: auto;
}

Prova a fare tu stesso

Attenzione, nell'esempio sopra, l'immagine può essere ingrandita oltre la sua dimensione originale. In molti casi, una soluzione migliore è quella di passare a max-width attributo.

Utilizza l'attributo max-width

Se si imposta l'attributo max-width al 100%, l'immagine verrà ridotta di conseguenza, ma non verrà ingrandita oltre la sua dimensione originale:

Esempio

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

Prova a fare tu stesso

Aggiungi un'immagine alla pagina dell'istanza

Esempio

img {
  width: 100%;
  height: auto;
}

Prova a fare tu stesso

L'immagine di sfondo

L'immagine di sfondo può anche rispondere all'adattamento delle dimensioni e alla scala.

Questi sono i tre metodi diversi che mostriamo:

1. Se si imposta background-size Se l'attributo è impostato su "contain", l'immagine di sfondo viene ingrandita e tenta di adattarsi all'area di contenuto. Tuttavia, l'immagine mantiene il suo rapporto di aspetto (la relazione tra larghezza e altezza dell'immagine):

Questo è il codice CSS:

Esempio

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

Prova a fare tu stesso

2. Se si imposta background-size Se l'attributo è impostato su "100% 100%", l'immagine di sfondo viene stirata per coprire l'intera area di contenuto:

Questo è il codice CSS:

Esempio

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}

Prova a fare tu stesso

3. Se background-size Se l'attributo è impostato su "cover", l'immagine di sfondo viene ridimensionata per coprire l'intera area di contenuto. Nota che il valore "cover" mantiene il rapporto di aspect ratio e potrebbe tagliare una parte dell'immagine di sfondo:

Questo è il codice CSS:

Esempio

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

Prova a fare tu stesso

Preparare immagini diverse per dispositivi diversi

L'immagine grande si visualizza perfettamente sui grandi schermi dei computer, ma non è utile sui dispositivi piccoli. Perché caricare un'immagine grande quando devi ridurla? Per ridurre il carico o per qualsiasi altra ragione, puoi usare le query media per visualizzare immagini diverse su diversi dispositivi.

Questa è un'immagine grande e una piccola immagine, che verranno visualizzate su diversi dispositivi:

Esempio

/* Per larghezze inferiori a 400 pixel: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Per larghezze di 400 pixel o più grandi: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Prova a fare tu stesso

Puoi usare le query media min-device-width invece di min-width per controllare la larghezza del dispositivo, non la larghezza del browser. Quindi, quando riduci la dimensione della finestra del browser, l'immagine non cambia:

Esempio

/* Per dispositivi con meno di 400 pixel: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Per dispositivi di 400 pixel e più grandi: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Prova a fare tu stesso

L'elemento <picture> di HTML5

HTML5 ha introdotto <picture> L'elemento, che ti permette di definire più immagini.

Supporto del browser

38.0 13 38.0 9.1 25.0

<picture> L'azione dell'elemento è simile a <video> e <audio> Elementi. Abbiamo impostato diverse fonti e la priorità di corrispondenza della prima fonte è la fonte in uso:

Esempio

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

Prova a fare tu stesso

srcset L'attributo è obbligatorio e definisce la fonte dell'immagine.

media L'attributo è opzionale e accetta valori Regola @media CSS trovare le query di media.

Suggerimento:Dovresti anche considerare per quelli che non supportano <picture> Definizione del browser dell'elemento <img> Elemento.