HTML <picture> 元素
HTML <picture> 元素
日期:2022-07-05
本文字数:140 字 阅读完需:约 1 分钟
HTML
实例
根据屏幕匹配的不同尺寸显示不同图片,如果没有匹配到或浏览器不支持 picture 属性则使用 img 元素:
< picture > < source media = " (min-width: 650px) " srcset = " demo1.jpg " > < source media = " (min-width: 465px) " srcset = " demo2.jpg " > < img src = " img_girl.jpg " > </ picture >
尝试一下 »
定义
picture 元素允许我们在不同的设备上显示不同的图片,一般用于响应式。
HTML5 引入了
注意: 元素是放在最后一个 <picture>
元素之后,如果浏览器不支持该属性则显示 元素的的图片。
浏览器支持
表格中的数字表示支持该元素的第一个浏览器版本号。
元素 | |||||
---|---|---|---|---|---|
<picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |