Manual de referencia de HTML

大全 de etiquetas HTML

HTML: <picture> elemento

El elemento <picture> de HTML utiliza cero o más elementos <source> y un elemento <img> para proporcionar diferentes imágenes para diferentes/Proporciona versiones de imágenes para diferentes escenarios de dispositivos. El navegador seleccionará el elemento <source> más adecuado, y si no hay coincidencia, seleccionará la URL del atributo src del elemento <img>. Luego, la imagen seleccionada se presenta en el espacio ocupado por el elemento <img>.

Ejemplo

Muestra cómo mostrar diferentes imágenes según el tamaño de la pantalla, si no se encuentra una coincidencia o el navegador no admite la propiedad picture, se utiliza el elemento img:

Ejemplo

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>Manual básico(oldtoolbag.com)</title>
</head>
<body>
<h2>elemento picture</h2>
<picture>
　　<source　media="(min-width:　650px)"　srcset="/run/html/views.png">
　　<source　media="(min-width:　465px)"　srcset="/run/html/default.jpg">
　　<img　src="/run/html/haha.gif"　　style="width:auto;">
</picture>
</body>
</html>

Ver la prueba ‹/›

Definición

El elemento picture permite mostrar diferentes imágenes en diferentes dispositivos, generalmente utilizado en respuesta a la capacidad.

HTML5 Se introdujo el elemento <picture>, que permite ajustar más flexible la ajuste de recursos de imagen.

El elemento <picture> puede contener cero o más elementos <source> y un <img> elemento, cada elemento <source> coincide con diferentes dispositivos e ilustra diferentes fuentes de imágenes, si no hay coincidencia, se selecciona la url en el atributo src del elemento <img>.

Nota: 　　　　

　　　　　　　　El elemento <img> está colocado en el último 　<picture> Después del elemento, si el navegador no admite la propiedad, se muestra la imagen del elemento <img>. 　　　　

Compatibilidad del navegador

Los números en la tabla representan la versión del primer navegador que admite el elemento.

IEFirefoxOperaChromeSafari

HTML 4.01 y HTML5 diferencias entre

El atributo <picture> es HTML5 Definidos recientemente.

Atributos globales

Soporte de <picture> etiqueta Atributos globales de HTML.

Atributos de eventos

Soporte de <picture> etiqueta Atributos de eventos de HTML.

HTML: <q> etiqueta HTML: <pre> etiqueta