HTML <source> srcset 属性 详解
HTML基础 2022-06-02 12:07:44小码哥的IT人生shichen
HTML <source> srcset 属性
实例
具有两个源文件和备用图像的 <picture> 元素：
<picture>
<source media="(min-width:600px)" srcset="tulip-yellow.jpg">
<source media="(min-width:600px)" srcset="tulip-red.jpg">
<img src="tulip.jpg" 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
定义和用法
srcset 属性规定要在不同情况下使用的图像的 URL。
在 <picture> 中使用 <source> 时，需要此属性。
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| 属性 | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| srcset | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
语法
<source srcset="URL">
属性值
| 值 | 描述 |
|---|---|
| URL |
规定图像的 URL。 可能的值：
|
