HTML <picture> 标签 详解
HTML基础 2022-06-02 09:42:22小码哥的IT人生shichen
HTML <picture> 标签
实例
如何使用 <picture> 标签：
<picture>
<source media="(min-width:650px)" srcset="/i/photo/flower-4.jpg">
<source media="(min-width:465px)" srcset="/i/photo/tulip.jpg">
<img src="/i/photo/flower.gif" alt="Flowers" style="width:auto;">
</picture>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>picture 元素</h1>
<p>请调整浏览器窗口的大小以加载不同的图像。</p>
<picture>
<source media="(min-width:650px)" srcset="/i/photo/flower-4.jpg">
<source media="(min-width:465px)" srcset="/i/photo/tulip.jpg">
<img src="/i/photo/flower.gif" alt="Flowers" style="width:auto;">
</picture>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
<picture> 标签使 Web 开发人员在指定图像资源方面更具灵活性。
<picture> 元素的最常见用途是在响应式设计中用于艺术指导。可以设计多个图像来更好地填充浏览器视口，而不是根据视口宽度缩放一个图像。
<picture> 元素包含两个标签：一个或多个 <source> 标签和一个 <img> 标签。
浏览器将查找媒体查询与当前视口宽度匹配的第一个 <source> 元素，然后显示正确的图像（在 srcset 属性中指定）。 <img> 元素是 <picture> 元素的最后一个子元素，如果没有 source 标签匹配，则作为后备选项。
提示：<picture> 元素的作用类似于 <video> 和 <audio>。您设置好不同的来源，然后符合首选项的第一个 source 就是是所使用的来源。
浏览器支持
表格中的数字注明了支持该元素的首个浏览器版本。
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
全局属性
<picture> 标签同时支持 HTML 中的全局属性。
事件属性
<picture> 标签同时支持 HTML 中的事件属性。
相关页面
CSS 教程：CSS 响应式设计 - 图像
