新增！我的 44 页电子书“44 分钟掌握 CSS”已发布！ 😃

立即获取 →

# source

定义 <audio>、<video> 或 <picture> 元素的源。

示例： 复制

Picture of a Ha Long Bay sunset 
<picture>
 <source
  media="(min-width: 800px)"
  srcset="/images/sunset-360.jpg 360w,
          /images/sunset-720.jpg 720w,
          /images/sunset-1440.jpg 1440w"
  sizes="33.3vw">
 <source
  srcset="/images/sunset-720.jpg 2x,
          /images/sunset-360.jpg 1x">
 <img src="/images/sunset.jpg" alt="Picture of a Ha Long Bay sunset">
</picture>

src

媒体所在的 URL。

"/images/tiramisu.jpg"

您可以使用相对 URL。

"https://htmlreference.cn/images/traffic.jpg"

您可以使用绝对 URL。

srcset

定义用于相同媒体的不同源的列表。浏览器将选择最佳的源使用。

"/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w"

您可以使用宽度描述符，例如 360w。此值将除以源大小之一（在 sizes 属性中定义）以获得像素密度。

@html

sizes

定义不同源大小的列表。您可以将它们中的每一个与媒体查询结合使用。

"(min-width: 800px) 1440px, 720px"

如果视口大于 800px，浏览器将使用 1440px 图像（在 srcset 中定义）。
否则将使用 720px。

@html

type

定义源的MIME 类型。

"image/jpg"

您只能使用音频、视频或图片 MIME 类型。

media

为 <picture> 源定义媒体查询。

"(min-width: 800px)"

该媒体仅在视口大于 800px 时使用。