Elemento picture en HTML

Elemento picture en html

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 contenidoUn elemento organizativo, un elemento normal, un elemento que contiene medios incrustados o un elemento interactivo.
Contenido permitidoElemento <source> cero veces o más, seguido de elemento <img>.
AcrónimoLas etiquetas de inicio o finalización no se pueden omitir.
Elementos del padreCualquier elemento que acepte elementos incrustados.
Interfaz DOMOHTMLPictureElement

Características

En este elemento html picture se puede utilizar propiedades globales.

Soporte de navegadores

ChromeFirefoxEdgeSafariÓpera
3838139.125