- <picture> 标签通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。
- 浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的 URL。然后，所选图像呈现在<img>元素占据的空间中。
- 要决定加载哪个 URL，user agent 检查每个 <source> 的 srcset、media 和 type 属性，来选择最匹配页面当前布局、显示设备特征等的兼容图像。
- <picture> 的常见使用场景：
- 艺术指导 (Art direction) —— 针对不同 media 条件裁剪或修改图像
- 遇到所有浏览器都不支持的特定格式时，提供不同的图像格式
- 如果要为高 DPI (Retina) 显示提供更高像素密度的图像版本，请在 <img> 元素上使用 srcset 。这使得浏览器可以在节约流量模式下选择低像素密度版本，且不需要您编写明确的 media 条件。
|
属性 |
描述 |
|
media |
media 属性允许你提供一个用于给用户代理作为选择 <source> 元素的依据的媒体条件 (media condition)（类似于媒体查询）。如果这个媒体条件匹配结果为 false，那么这个 <source> 元素会被跳过。 |
|
type |
type 属性允许你为 <source> 元素的 srcset 属性指向的资源指定一个 MIME 类型。如果用户代理不支持指定的类型，那么这个 <source> 元素会被跳过 |
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <picture> <source srcset="/images/surfer-240-200.jpg" media="(min-width: 800px)"> <img src="/images/painted-hand-298-332.jpg" alt="" /> </picture> </body>
</html> |
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="MDN"> </picture> </body>
</html> |
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <picture> <source srcset="mdn-logo.svg" type="image/svg+xml"> <img src="mdn-logo.png" alt="MDN"> </picture> </body>
</html> |
注
- 你可以使用 object-position 属性调整元素框架内图像的位置，用 object-fit 属性控制图片如何调整大小来适应框架。
来自 <https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/picture>