新！我的 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.dev.org.tw/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 時使用。