<picture>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.
Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.
El elemento HTML <picture> es un contenedor usado para especificar múltiples elementos <source> y un elemento <img> contenido en él para proveer versiones de una imagen para diferentes escenarios de dispositivos. Si no hay coincidencias con los elementos <source>, el archivo especificado en los atributos src del elemento <img> es utilizado. La imagen seleccionada es entonces presentada en el espacio ocupado por el elemento <img>.
Para seleccionar la imagen óptima, el user agent examina cada atributo srcset, media, y type de la fuente para seleccionar la imagen compatible.
El navegador escogerá la fuente más apropiada de acuerdo al diseño de la página (las limitaciones de la caja donde aparecerá la imagen) y el dispositivo que se utilize para visualizarla (p.ej. pantalla normal o hiDPI).
| Categorías de contenido | Flujo de contenido, contenido textual o estático, contenido incrustado |
|---|---|
| Contenido permitido | Cero o más elementos <source>, seguidos por un elemento <img>, mezclados opcionalmente con elementos script-supporting. |
| Omisión de etiquetas | None, both the starting and ending tag are mandatory. |
| Padres permitidos | Cualquier elemento que permita embeber contenido. |
| ARIA roles permitidos | Ninguno. |
| DOM interface | HTMLPictureElement |
Atributos
Este elemento sólo incluye atributos globales.
Notas de uso
Se puede usar la propiedad object-position para ajustar la posición de la imagen dentro del marco del elemento, y la propiedad object-fit para controlar como el tamaño de la imagen se ajusta para adaptarse al marco.
Ejemplos
Estos ejemplos demuestran los efectos que tienen diferentes atributos del atributo <source> en la selección de la imagen a desplegar cuando se usa dentro de <picture>.
El atributo media
El atributo media permite especificar una media query que el agente de usuario evaluará para seleccionar un elemento <source>. Si la media query evalua a false, el elemento <source> es omitido.
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
<img src="mdn-logo-narrow.png" alt="MDN" />
</picture>
El atributo type
El atributo type permite especificar un tipo MIME para los recursos dados en el atributo srcset del elemento <source>. Si el agente de usuario no soporta dicho tipo, el elemento <source> es omitido.
<picture>
<source srcset="mdn-logo.svg" type="image/svg+xml" />
<img src="mdn-logo.png" alt="MDN" />
</picture>
Especificaciones
| Specification |
|---|
| HTML Standard # the-picture-element |
Compatibilidad con navegadores
BCD tables only load in the browser
Ver también
- Elemento
<img> - Elemento
<source> - Posicionando y redimensionando la imagen dentro de su marco:
object-positionyobject-fit