<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 中的事件属性。