<img src="/images/sunset.jpg" alt="Picture of a Ha Long Bay sunset">新！我的 44 頁電子書「44 分鐘學會 CSS」已經出版了！😃
# img
定義插入網頁中的影像。
範例： 複製
範例： 複製
<!-- For responsive images, use srcset and sizes -->
<img src="/images/sunset-360.jpg"
alt="Picture of a Ha Long Bay sunset"
srcset="/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w>"
sizes="(min-width: 800px) 720px, 360px">
src
放置影像的 URL。
必要。
"/images/tiramisu.jpg"
您可以使用相對 URL。
"https://htmlreference.dev.org.tw/images/traffic.jpg"
您可以使用絕對 URL。
alt
如果影像不可用，則用來描述影像的替代文字。螢幕閱讀程式會使用。
必要。
"一位男子站在龍珠船前的圖片"
描述影像，彷彿它不存在一樣。
srcset
定義同一個影像的不同來源清單。瀏覽器會選擇最佳來源使用。
"/images/[email protected] 2x"
您可以定義像素密度描述符，例如 2x。在此情況下，[email protected] 的寬度為720 像素。
<img src="/images/sunset.jpg"
srcset="/images/[email protected] 2x"
alt="Picture of a Ha Long Bay sunset">瀏覽器會根據可用空間、像素密度等使用 sunset.jpg 或 [email protected]。
"/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w"
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w"
您可以使用寬度描述符，例如 360w。此值除以來源大小之一（在 sizes 屬性中定義）以取得像素密度。
<img src="/images/sunset-360.jpg"
alt="Picture of a Ha Long Bay sunset"
srcset="/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w>"
sizes="(min-width: 800px) 720px, 360px">
大小
定義一個不同來源大小的清單。你可以將它們中的每一個與媒體查詢結合使用。
"(min-width: 800px) 1440px, 720px"
如果視窗比 800px 大，瀏覽器將使用在 srcset 中定義的 1440px 影像。
否則，它將使用 720px。
<img src="/images/sunset-360.jpg"
alt="Picture of a Ha Long Bay sunset"
srcset="/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w>"
sizes="(min-width: 800px) 720px, 360px">
高度
定義影像的高度。
"240"
高度以像素為單位。
寬度
定義影像的寬度。
"120"
寬度以像素為單位。