Prova questa demo
- Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi
Schermo intero
. - Ricarica l'app utilizzando browser di dimensioni diverse. Nota come le immagini sono diverse non solo hanno dimensioni diverse, ma anche ritagli e proporzioni.
Che succede qui?
Direzione artistica mostra immagini diverse su schermi di dimensioni diverse.
Un'immagine adattabile carica dimensioni diverse della stessa immagine. La direzione artistica prende fa un ulteriore passo in avanti e vengono caricate immagini completamente diverse a seconda display.
Utilizza la direzione artistica per migliorare la presentazione visiva. Ad esempio, i diversi il ritaglio delle immagini di questa demo assicura che il punto d'interesse (il fiore) sia visualizzata sempre nei dettagli, indipendentemente dal display. I vantaggi delle indicazioni artistiche sono: puramente estetico; non offre vantaggi in termini di rendimento rispetto alle immagini adattabili.
Visualizza il codice
- Visualizza
index.htmlper vedere il codice art director per questa demo.
Come funziona il codice
La direzione artistica utilizza
<picture>,
<source>,
e <img>.
immagine
Il tag <picture> fornisce un wrapper per zero o più tag <source> e un tag <image>.
fonte
Il tag <source> specifica una risorsa multimediale.
Il browser utilizza il primo tag <source> con una query multimediale
che restituisce true. Se nessuna delle query multimediali corrisponde,
browser torna al caricamento dell'immagine specificata dall'<img>.
.
img
Il tag <img> determina il funzionamento di questo codice nei browser che non
Supportino il tag <picture>.
Se un browser non supporta il tag <picture>, carica il tag
immagine specificata dal tag <img>.