Tag HTML <immagine>
Esempio
Come utilizzare il tag <immagine>:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Definizione e utilizzo
Il <picture>tag offre agli sviluppatori Web una maggiore flessibilità nello specificare le risorse dell'immagine.
L'uso più comune <picture>dell'elemento sarà per la direzione artistica nei design reattivi. Invece di avere un'immagine ingrandita o ridotta in base alla larghezza della finestra, è possibile progettare più immagini per riempire meglio la finestra del browser.
L' <picture>elemento contiene due tag: uno o più
tag <source> e un tag <img> .
Il browser cercherà il primo elemento <source> in cui la query multimediale corrisponde alla larghezza del viewport corrente, quindi visualizzerà l'immagine corretta (specificata nell'attributo srcset). L'elemento <img> è obbligatorio come ultimo figlio <picture>dell'elemento, come opzione di fallback se nessuno dei tag di origine corrisponde.
Suggerimento: l' <picture>elemento funziona in modo "simile" a <video> e <audio>. Imposti diverse fonti e la prima fonte che si adatta alle preferenze è quella utilizzata.
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente l'elemento.
| Element | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
Attributi globali
Il <picture>tag supporta anche gli attributi globali in HTML .
Attributi dell'evento
Il <picture>tag supporta anche gli attributi dell'evento in HTML .
Pagine correlate
Esercitazione HTML: elemento HTML <immagine>
Tutorial CSS: CSS Responsive Design - Immagini