Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Katie Hempenius
Prova questa demo
Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi
A schermo intero.
Ricarica l'app utilizzando dimensioni diverse del browser. Notare quanto siano diverse le immagini: non solo hanno dimensioni diverse, ma anche ritagli e proporzioni diverse.
Che succede qui?
La direzione artistica
mostra immagini diverse su dimensioni di visualizzazione diverse.
Un'immagine adattabile carica dimensioni diverse della stessa immagine. L'art direction fa un passo avanti e carica immagini completamente diverse a seconda del display.
Utilizza l'art direction per migliorare la presentazione visiva. Ad esempio, i diversi ritagli delle immagini in questa demo assicurano che il punto d'interesse (il fiore) venga sempre mostrato in dettaglio, indipendentemente dal display. I vantaggi dell'art direction sono puramente estetici e non offrono alcun vantaggio in termini di rendimento rispetto alle immagini adattabili.
Visualizza il codice
Visualizza index.html per vedere il codice di direzione artistica di questa demo.
Il tag <picture> fornisce un wrapper per zero o più tag <source> e un tag <image>.
source
Il tag <source> specifica una risorsa multimediale.
Il browser utilizza il primo tag <source> con una query sui media
che restituisce true. Se nessuna delle query sui media corrisponde, il browser ricorre al caricamento dell'immagine specificata da <img>.
.
img
Il tag <img> consente a questo codice di funzionare sui browser che non supportano il tag <img>.<picture>
Se un browser non supporta il tag <picture>, carica l'immagine specificata dal tag <img>.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2018-11-05 UTC."],[],[]]
.