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 | media_query | 它定义并接受任何可以在 CSS 中定义的媒体查询。 |
srcset | URL | 它定义了可用于不同情况的图像的 URL。（必需的） |
| type | video/ogg video/mp4 video/webM audio/ogg audio/mpeg | 它确定 MIME 类型 |
| src | URL | 它指定图像的位置。 |
HTML <picture> 标签支持HTML 中的全局属性。
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <picture> | Yes | Yes | Yes | Yes | Yes |