Prova questa demo
Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi Schermo intero
.Ricarica l'app in finestre del browser di dimensioni diverse per vedere il browser caricare immagini diverse e utilizzare layout diversi a seconda delle dimensioni del browser.
Visualizza il codice
- Consulta
index.htmlper il codice che consente di eseguire questa operazione:
<img src="flower.jpg"
srcset="flower-small.jpg 480w, flower-large.jpg 800w"
sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">
Che succede qui?
Il valore dell'attributo sizes indica che la larghezza di visualizzazione dell'immagine sarà:
"100% della larghezza dell'area visibile" su aree visibili con larghezza fino a 480 px, "50% della larghezza dell'area visibile" su schermi con larghezza compresa tra 481 e 1024 px e 800 px su schermi con larghezza superiore a 1024 px. Queste larghezze corrispondono a quelle specificate nel CSS.
La possibilità di specificare più larghezze di area annuncio consente di adattare i layout di pagina che utilizzano stili diversi (ovvero larghezze delle immagini) per dimensioni dell'area visibile diverse.
Come specificare più larghezze per l'area annuncio
- Utilizza un elenco separato da virgole per specificare più larghezze degli slot. Ogni elemento dell'elenco, ad eccezione dell'ultimo, è costituito da una condizione multimediale (ad es.
max-widthomin-width) e da una larghezza dell'area annuncio. - L'ultimo elemento di questo elenco è la larghezza predefinita dell'area annuncio. È l'impostazione predefinita, quindi non è necessario specificare una condizione multimediale.
- Puoi elencare tutte le larghezze degli slot che vuoi, il numero di immagini elencate in
srcsetnon è importante. La larghezza dello slot può essere specificata utilizzando diverse unità. Di seguito sono riportate tutte le larghezze valide:
100px33vw20emcalc(50vw-10px)
La seguente larghezza non è valida:
25%(le percentuali non possono essere utilizzate con l'attributo sizes)