Etiqueta HTML <imagen>
Ejemplo
Cómo utilizar la etiqueta <imagen>:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Definición y uso
La <picture>
etiqueta brinda a los desarrolladores web más flexibilidad para especificar recursos de imágenes.
El uso más común del <picture>
elemento será para la dirección de arte en diseños receptivos. En lugar de tener una imagen que se escala hacia arriba o hacia abajo en función del ancho de la ventana gráfica, se pueden diseñar varias imágenes para llenar mejor la ventana gráfica del navegador.
El <picture>
elemento contiene dos etiquetas: una o más
etiquetas <source> y una etiqueta <img> .
El navegador buscará el primer elemento <source> donde la consulta de medios coincida con el ancho de la ventana gráfica actual y luego mostrará la imagen adecuada (especificada en el atributo srcset). Se requiere el elemento <img> como el último elemento secundario del <picture>
elemento, como una opción alternativa si ninguna de las etiquetas de origen coincide.
Sugerencia: el <picture>
elemento funciona de manera "similar" a <video> y <audio>. Configura diferentes fuentes, y la primera fuente que se ajusta a las preferencias es la que se está utilizando.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el elemento.
Element | |||||
---|---|---|---|---|---|
<picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
Atributos globales
La <picture>
etiqueta también es compatible con los atributos globales en HTML .
Atributos de eventos
La <picture>
etiqueta también es compatible con los atributos de eventos en HTML .
páginas relacionadas
Tutorial de HTML: Elemento HTML <imagen>
Tutorial CSS: CSS Responsive Design - Imágenes