- 2025-03-15
- 3
HTML <picture> 标签
更新：2025-03-13 13:33:53
来源：
整理：藏葵网
点击：次
实例
如何使用<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>
定义和用法
<picture>标签使Web开发人员在指定图像资源方面更具灵活性。
<picture>元素的最常见用途是在响应式设计中用于艺术指导。可以设计多个图像来更好地填充浏览器视口，而不是根据视口宽度缩放一个图像。
<picture>元素包含两个标签：一个或多个<source>标签和一个<img>标签。
浏览器将查找媒体查询与当前视口宽度匹配的第一个<source>元素，然后显示正确的图像（在srcset属性中指定）。<img>元素是<picture>元素的最后一个子元素，如果没有source标签匹配，则作为后备选项。
提示：<picture>元素的作用类似于<video>和<audio>。您设置好不同的来源，然后符合首选项的第一个source就是是所使用的来源。
猜你喜欢
- 2025-03-17
- 39
- 2025-03-17
- 39
- 2025-03-17
- 9
- 2025-03-17
- 39
- 2025-03-17
- 39
- 2025-03-13
- 39
- 2025-03-17
- 39
- 2025-03-17
- 39
热门下载
- 2025-03-17
- 39
- 2025-03-17
- 39
- 2025-03-17
- 39
- 2025-03-13
- 1
- 2025-03-16
- 0