HTML教程-HTML<picture>标签
HTML的<picture>标签用于响应式网页设计，根据视口、高度、宽度、方向和像素密度加载不同的图像。
<picture>标签包含一个或多个<source>元素和一个<img>元素。
根据视口，将从不同的<source>标签加载匹配的图像，如果没有源包含匹配的图像，则默认图像（在<img>标签中指定）将显示在浏览器中。
这是HTML5中的一个新标签。
语法
<picture>
<source srcset="" media="">
<img src="">
</picture>下面是关于HTML <picture>标签的一些规范：
| 显示 | 内联 |
|---|---|
| 开始标签/结束标签 | 开始标签和结束标签都有 |
| 用法 | 图像 |
示例
<!DOCTYPE html>
<html>
<head>
<title>Picture Tag</title>
<style>
body {
text-align: center;
}
p {
font-size: bold;
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<h2>Example of picture tag</h2>
<p>Resize the page to see the different versions of the images at different viewports, and as per viewport image will be automatically changed.</p>
<picture>
<source srcset="download1.jpg" media="(min-width: 750px)">
<source srcset="pic2.jpg" media="(min-width: 450px)">
<img srcset="rose.jpg" alt="default image" style="width: auto;">
</picture>
</body>
</html>属性：
特定于标签的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| media | 媒体查询 | 定义并接受在CSS中定义的任何媒体查询。 |
| srcset | URL | 定义用于不同情况的图像的URL。（必需） |
| type | video/ogg video/mp4 video/webM audio/ogg audio/mpeg | 确定MIME类型。 |
| src | URL | 指定图像的位置。 |
全局属性：
HTML <picture>标签支持HTML中的全局属性。
支持的浏览器
| 元素 |  Chrome |  IE |  Firefox |  Opera |  Safari |
|---|---|---|---|---|---|
<picture> | 是 | 否 | 是 | 是 | 是 |
