Etiqueta <picture> de HTML

Definición y uso

<picture> La etiqueta permite a los desarrolladores web ser más flexibles al especificar recursos de imágenes.

<picture> El uso más común del elemento es en el diseño responsive, para la orientación artística. Se pueden diseñar múltiples imágenes para llenar mejor la ventana de visualización del navegador, en lugar de que una imagen se amplíe o reduzca proporcionalmente según el ancho de la ventana de visualización.

<picture> El elemento contiene dos etiquetas: una o más <source> etiqueta y una <img> etiqueta.

El navegador buscará el primer elemento <source> que coincida con la consulta de medios y el ancho de la ventana de visualización actual, luego mostrará la imagen correcta (especificada en la propiedad srcset). El elemento <img> actúa como <picture> El último elemento hijo del elemento es obligatorio y se utiliza como opción de reserva cuando no hay ningún etiqueta source que coincida.

Consejo:<picture> El funcionamiento del elemento <video> y <audio> Similares. Puede configurar diferentes fuentes, y se utilizará la primera fuente adecuada para las preferencias.

Vea también：

Tutorial de HTML：Elemento <picture> HTML

Tutorial de CSS：Diseño responsivo CSS - Imágenes

Ejemplo

<picture> Método de uso de la etiqueta:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Prueba tu mismo

Atributos globales

<picture> La etiqueta también admite Atributos globales en HTML.

Atributos de eventos

<picture> La etiqueta también admite Atributos de eventos en HTML.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la etiqueta.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0