
Un elemento html picture es un contenedor que se utiliza para seleccionar múltiples fuentes a través de un elemento <source>
para una imagen <img>
contenida en él. El navegador elegirá la fuente de imagen más adecuada según el diseño de la página (es decir, el cuadro en el que está contenido este elemento) y el dispositivo en el que se mostrará la imagen (normal o alta resolución).
Ejemplo de uso del elemento <picture>
para mostrar una imagen de logotipo amplia si se cumple una determinada condición de consulta de medios (que el ancho sea de al menos 600 píxeles) mediante el uso de la propiedad media
con el elemento <source>
. Si no cumple con la condición de consulta de medios, el elemento <source> se omitirá y se moverá más allá:
< picture > < source srcset = "cover-large.webp" media = "(min-width: 600px)" > < img src = "cover-small.webp" alt = "Imagen de portada" > </ picture >
Un ejemplo del uso de un elemento <picture>
para mostrar una imagen de un tipo MIME específico, si el navegador no admite ese tipo (es decir, el formato de imagen no funciona en el navegador), el elemento <source>
se omitirá y se moverá más allá:
< picture > < source srcset = "home-logo.svg" type = "image / svg + xml" > < img src = "home-logo.png" alt = "Logo del Home" > </ picture >
Etiqueta html picture
Clasificaciones de contenido | Un elemento organizativo, un elemento normal, un elemento que contiene medios incrustados o un elemento interactivo. |
---|---|
Contenido permitido | Elemento <source> cero veces o más, seguido de elemento <img> . |
Acrónimo | Las etiquetas de inicio o finalización no se pueden omitir. |
Elementos del padre | Cualquier elemento que acepte elementos incrustados. |
Interfaz DOMO | HTMLPictureElement |
Características
En este elemento html picture se puede utilizar propiedades globales.
Soporte de navegadores
Chrome | Firefox | Edge | Safari | Ópera |
---|---|---|---|---|
38 | 38 | 13 | 9.1 | 25 |
- Descripción de las Etiquetas HTML
- El Texto en HTML
- Elemento a en HTML
- Elemento abbr en HTML
- Elemento address en HTML
- Elemento area en HTML
- Elemento article en HTML
- Elemento aside en HTML
- Elemento audio en HTML
- Elemento b en HTML
- Elemento base en HTML
- Elemento bdi en HTML
- Elemento bdo en HTML
- Elemento blockquote en HTML
- Elemento body en HTML
- Elemento br en HTML
- Elemento button en HTML
- Elemento canvas en HTML
- Elemento caption en HTML
- Elemento cite en HTML
- Elemento code en HTML
- Elemento col en HTML
- Elemento colgroup en HTML
- Elemento data en HTML
- Elemento datalist en HTML
- Elemento dd en HTML
- Elemento del en HTML
- Elemento details en HTML
- Elemento dfn en HTML
- Elemento div en HTML
- Elemento dl en HTML
- Elemento dt en HTML
- Elemento em en HTML
- Elemento embed en HTML
- Elemento fieldset en HTML
- Elemento figcaption en HTML
- Elemento figure en HTML
- Elemento footer en HTML
- Elemento form en HTML
- Elemento head en HTML
- Elemento header en HTML
- Elemento hr en HTML