img 属性 srcset 实现响应式图片

如何使用 HTML img 标签的 srcset 属性定义响应式图片。

img 标签的 srcset 属性允许您指定浏览器可以根据需要根据像素密度或窗口宽度使用的响应式图像。这样它只下载渲染页面所需的资源，例如如果在移动设备上，它无法下载更大的图像。

下面的示例显示我们为 4 种不同的屏幕尺寸提供 4 个不同的图像：

/**
* 犀牛前段部落
* https://www.pipipi.net/
*/
<img src="dog.png"
  alt="A picture of a dog"
  srcset="dog-500.png 500w,
         dog-800.png 800w,
       dog-1000.png 1000w,
       dog-1400.png 1400w">

在 srcset 中我们使用 w 单位来表示窗口宽度。

因为我们这样做，所以我们还需要使用尺寸属性：

/**
* 前端教程网
* https://www.pipipi.net/
*/
<img src="dog.png"
  alt="A picture of a dog"
  sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
  srcset="dog-500.png 500w,
         dog-800.png 800w,
       dog-1000.png 1000w,
       dog-1400.png 1400w">

本例中，size属性中的(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px字符串描述了图像相对于视口的大小，多个比例之间用逗号分隔。

介质条件width: 500px 指定图像相对于视口宽度的大小。简而言之，如果窗口大小小于 500px，它将以窗口大小的 100% 渲染图像。

如果窗口尺寸较大但小于 900px，则会以窗口尺寸的 50% 渲染图像。

如果它更大，它会以 800 像素渲染图像。

vw单位对大家来说可能比较陌生，总之我们可以说1vw是1%窗口宽度，所以100vw是100%窗口宽度。

https://responsivebreakpoints.com/ 是一个有用的网站，可以生成 srcset 和逐渐缩小的图像。