首页 / 知识

picture元素定义分享

2023-04-11 13:37:00

HTML<picture>元素

实例

根据屏幕匹配的不同尺寸显示不同图片，如果没有匹配到或浏览器不支持picture属性则使用img元素：

</picture>

定义

picture元素允许我们在不同的设备上显示不同的图片，一般用于响应式。

HTML5引入了<picture>元素，该元素可以让图片资源的调整更加灵活。

<picture>元素零或多个<source>元素和一个<img>元素，每个<source>元素匹配不同的设备并引用不同的图像源，如果没有匹配的，就选择<img>元素的src属性中的url。

注意:<img>元素是放在最后一个<picture>元素之后，如果浏览器不支持该属性则显示<img>元素的的图片。

HTML4.01与HTML5之间的差异

<picture>属性是HTML5新定义的。

全局属性

<picture>标签支持HTML的全局属性。

事件属性

<picture>标签支持HTML的事件属性。