Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
<picture>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since marzo de 2016.
Experimental:Esta es unatecnología experimental
Comprueba laTabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.
Elelemento 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 atributossrc del elemento<img> es utilizado. La imagen seleccionada es entonces presentada en el espacio ocupado por el elemento<img>.
Para seleccionar la imagen óptima, eluser agent examina cada atributosrcset,media, ytype 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 | Ninguna, tanto la etiqueta inicial como la final son obligatorias. |
| Padres permitidos | Cualquier elemento que permita embeber contenido. |
| ARIA roles permitidos | Ninguno. |
| DOM interface | HTMLPictureElement |
Atributos
Este elemento sólo incluyeatributos globales.
Notas de uso
Se puede usar la propiedadobject-position para ajustar la posición de la imagen dentro del marco del elemento, y la propiedadobject-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 atributomedia
El atributomedia permite especificar una media query que el agente de usuario evaluará para seleccionar un elemento<source>. Si la media query evalua afalse, 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 atributotype
El atributotype 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 # the-picture-element |
Compatibilidad con navegadores
Ver también
- Elemento
<img> - Elemento
<source> - Posicionando y redimensionando la imagen dentro de su marco:
object-positionyobject-fit