html picture属性,HTML: <picture> 元素

HTML: 元素

HTML 元素通过包含零或多个 元素和一个 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 元素，如果没有匹配的，就选择 元素的 src 属性中的URL。然后，所选图像呈现在 元素占据的空间中。

示例

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

示例html>

基础教程(nhooo.com)

picture 元素

  

测试看看 ‹/›

定义

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

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

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

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

浏览器支持

表格中的数字表示支持该元素的第一个浏览器版本号。

IEFirefoxOperaChromeSafari

HTML 4.01 与 HTML5 之间的差异

属性是 HTML5 新定义的。

全局属性

标签支持 HTML 的全局属性。

事件属性

标签支持 HTML 的事件属性。