<img> 元素 - HTML 参考

新！我的 44 页电子书 "44 分钟内掌握 CSS" 已出版！ 😃

# img

定义图像，插入网页中。

示例: 复制

<img src="/images/sunset.jpg" alt="Picture of a Ha Long Bay sunset">

示例: 复制

<!-- 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.cn/images/traffic.jpg"`

可以使用绝对 URL 地址。

`alt`

如果图像不可用，用于描述图像的替代文本。由屏幕阅读器使用。

必填。

`"站在龙珠船前的男人照片"`

描述图像，就好像它不存在一样。

`srcset`

定义相同图像的不同来源列表。浏览器将选择最佳来源使用。

`"/images/[email protected] 2x"`

可以定义像素密度描述符，如 2x。在这种情况下，[email protected] 的宽度为 720px。

<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"`

可以使用宽度描述符，如 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">

`sizes`

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

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

如果视窗宽度大于 800px，浏览器将使用 1440px 图像（在 srcset 中定义）。
否则将使用 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">

`height`

定义图像的高度。

`"240"`

以像素为单位的高度。

`width`

定义图像的宽度。

`"120"`

以像素为单位的宽度。