Utilizzando La larghezza proprietà
Se la width proprietà è impostata su 100%, l'immagine sarà reattivo e scalare su e giù:
Si noti che nell'esempio precedente, l'immagine può essere scalato per essere più grande della sua dimensione originale. Una soluzione migliore, in molti casi, sarà quello di utilizzare il max-width proprietà invece.
Utilizzando Il max-width Proprietà
Se il max-width proprietà è impostata su 100%, l'immagine verrà scala verso il basso se deve, ma mai di scalare fino a essere più grande rispetto al suo formato originale:
Aggiungere un'immagine all'esempio pagina Web
immagini di sfondo
Le immagini di sfondo possono anche rispondere alle ridimensionamento e ridimensionamento.
Qui vi mostreremo tre diversi metodi:
1. Se il background-size proprietà è impostata su "contenere", l'immagine di sfondo scalerà, e cercare di inserire l'area del contenuto. Tuttavia, l'immagine manterrà il suo rapporto di aspetto (il rapporto proporzionale tra larghezza e altezza dell'immagine):
Ecco 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 tu stesso " 2. Se il background-size proprietà è impostata su "100% al 100%", l'immagine di sfondo si estenderà per coprire l'intera area dei contenuti:
Ecco il codice CSS:
Esempio
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
} Prova tu stesso " 3. Se il background-size proprietà è impostata su "cover" , l'immagine di sfondo scalerà a coprire l'intera area del contenuto. Si noti che la "cover" valore mantiene il rapporto di aspetto, e una parte dell'immagine di sfondo può essere fermato:
Ecco il codice CSS:
Esempio
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
} Prova tu stesso " Immagini diverse per i vari dispositivi
Una grande immagine può essere perfetto su un grande schermo del computer, ma inutile su un piccolo dispositivo. Perché caricare un'immagine di grandi dimensioni quando si ha a scala verso il basso in ogni caso? Per ridurre il carico, o per qualsiasi altro motivo, è possibile utilizzare le media query per visualizzare immagini diverse su diversi dispositivi.
Qui è una grande immagine ed una immagine più piccola che verrà visualizzato su diversi dispositivi:
Esempio
/* For width smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For width 400px and larger: */
@media only screen and (min-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
} Prova tu stesso " È possibile utilizzare la media query min-device-width , invece di min-width , che controlla la larghezza del dispositivo, invece della larghezza del browser. Poi l'immagine non cambia quando si ridimensiona la finestra del browser:
Esempio
/* For devices smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For devices 400px and larger: */
@media only screen and (min-device-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
} Prova tu stesso " HTML5 <picture> Element
HTML5 ha introdotto il <picture> elemento, che consente di definire più di un'immagine.
Supporto per il browser
| Elemento | |||||
|---|---|---|---|---|---|
| <picture> | Non supportato | 38.0 | 38.0 | Non supportato | 25,0 |
Il <picture> elemento funziona in modo simile alla <video> e <audio> elementi. Si imposta fonti diverse, e la prima fonte che si adatta alle preferenze è quello 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 tu stesso " Il srcset è richiesto attributo e definisce la sorgente dell'immagine.
Il media attributo è facoltativo, e accetta le media query che si trovano in regola CSS @media .
Si dovrebbe anche definire un <img> elemento per i browser che non supportano il <picture> elemento.