HTML source srcset 属性

最后更新于：2022-03-27 03:02:47

HTML <source> srcset 属性

HTML source srcset 属性 HTML <source> 标签

实例

在 <picture> 标签中使用 <source> 来设置不同屏幕显示的图片：

<picture>
<source media="(min-width:650px)" srcset="https://static.runoob.com/images/runoob-logo.png">
<source media="(min-width:465px)" srcset="https://static.runoob.com/images/code-icon-script.png">
<img src="https://static.runoob.com/images/mix/hjkg_icon.png" style="width:auto;">
</picture>

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
srcset 38.0 13.0  38.0 9.1 25.0

定义和用法

srcset 属性用于不同情况下显示的图片 URL。

<source> 应用于 <picture> 标签时需要使用到该属性。

HTML 4.01 与 HTML5之间的差异

<source> 标签是 HTML5 中的新标签。

语法

<source srcset="URL">

属性值

值 描述
URL 规定媒体文件的 URL。

可能的值：

  • 绝对 URL – 指向另一个网站（比如 href=”https://docs.gechiui.com/w3school/horse.ogg”）
  • 相对 URL – 指向网站内的一个文件（比如 href=”horse.ogg”）

HTML source srcset 属性 HTML <source> 标签