This translation is incomplete. Please help translate this article from English.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

L'element HTML <picture> és un contenidor utilitzat per especificar diversos elements <source> per a una determinada <img> continguda en el mateix. El navegador triarà la font més adequada d'acord amb el disseny actual de la pàgina (les restriccions del quadre en el qual apareixerà la imatge) i el dispositiu en el qual es mostrarà (per exemple, un dispositiu normal o HiDPI).

Context d'ús

Categories de contingut Contingut dinàmic, phrasing content, contingut incrustat
Contingut permès Zero or més elements <source>, seguits per un element <img>, opcionalment barrejats amb elements amb suport script
Omissió de l'etiqueta Cap, tant l'etiqueta inicial com l’etiqueta final són obligatòries
Elements pares permesos Qualsevol element que accepti contingut incrustat.
Interfície DOM HTMLPictureElement

Atributs

Aquest element només inclou els atributs globals.

Exemple 1: Usant l'atribut media

L'atribut media li permet especificar una consulta de medis que l'agent d'usuari avaluarà per a seleccionar un element <source>. Si la consulta de medis s'avalua com a false , l'element <source> s'omet.

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

Exemple 2: Usant l'atribut type

L'atribut type li permet especificar un tipus MIME per als recursos que es proporcionen en l'atribut srcset de l'element <source>. Si l'agent d'usuari no admet el tipus donat, l'element <source> s'omet.

​<picture>
 <source srcset="mdn-logo.svg" type="image/svg+xml">
 <img src="mdn-logo.png" alt="MDN">
</picture>

Especificacions

Especificació Estat Comentari
HTML Living Standard
The definition of '<picture>' in that specification.
Living Standard Definició incial

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 38 38 (38) Edge 13 25 9.1
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic 38 38.0 (38) No support 25 iOS 9.3

Veure

Document Tags and Contributors

Contributors to this page: Legioinvicta
Last updated by: Legioinvicta,