MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

<picture>

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

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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
WHATWG HTML Living Standard
The definition of '<picture>' in that specification.
Living Standard Definició incial

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,