Tag HTML <picture>

Definizione e uso

<picture> Il tag permette ai sviluppatori web di essere più flessibili nell'impostare le risorse delle immagini specifiche.

<picture> L'uso più comune dell'elemento è nella progettazione responsive per le direzioni artistiche. È possibile progettare più immagini per riempire meglio la viewport del browser, piuttosto che ingrandire o ridurre proporzionalmente un'immagine in base alla larghezza della viewport.

<picture> L'elemento contiene due tag: uno o più <source> tag e un <img> tag.

Il browser cercherà il primo elemento <source> che corrisponde alla query di media e alla larghezza attuale della viewport, quindi visualizzerà l'immagine corretta (specificata nell'attributo srcset). L'elemento <img> è utilizzato come <picture> L'ultimo elemento figlio dell'elemento è obbligatorio, utilizzato come opzione di riserva quando non c'è alcun tag source che corrisponde.

Suggerimento:<picture> Il funzionamento degli elementi <video> e <audio> Simile. Puoi impostare diverse sorgenti, la prima sorgente preferita verrà utilizzata.

Vedere anche:

Corso HTML:Elemento HTML <picture>

Corso CSS:Design responsivo CSS - Immagini

Esempio

<picture> Metodo di utilizzo del tag:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Prova tu stesso

Attributi globali

<picture> Il tag supporta anche Attributi globali in HTML.

Attributi degli eventi

<picture> Il tag supporta anche Attributi degli eventi in HTML.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente il tag.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0