<picture> | HTML5图像标签的定义与用法
定义与用法
- <picture>标签用于响应式网页设计，我们根据不同设备的尺寸加载不同的图像；
- <picture>标签可以包含一个或多个<source>元素和一个<img>元素；
- 系统根据不同设备从不同的<source>标签匹配图像，匹配失败，则显示<img>标签的默认图像。
语法格式
<picture>
<source srcset=”” media=””>
<img src=””>
</picture>
示例代码
<picture>
<source srcset="/img/solar.jpg" media="(min-width: 750px)">
<source srcset="/img/earth.jpg" media="(min-width: 450px)">
<img srcset="/img/galaxy.jpg" alt="default image" style="width: auto;">
</picture> 效果展示：
提示：改变窗口大小，可以看到图片变化。
浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
 |  |  |  |  |
除了IE，主流浏览器都支持<picture>标签。
标签属性
: HTML5新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| media | media_query | 它定义并接受可以在CSS中定义的任何媒体查询。 |
srcset | URL | 它定义了可用于不同情况的图像的URL。（需要） |
| type | video/ogg video/mp4 video/webM audio/ogg audio/mpeg | 它确定MIME类型 |
| src | URL | 它指定图像的位置。 |
全局属性
HTML <picture>标签支持HTML中的全局属性。
事件属性
<picture> 标签支持 HTML 中的事件属性。