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

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

img 标签的srcset 属性允许你设置响应式图像，浏览器可以根据你的偏好，根据像素密度或窗口宽度来使用这些图像。这样，它就可以只下载渲染页面所需的资源，例如，如果是在移动设备上，就不用下载更大的图像。

这里有一个例子，我们为4种不同的屏幕尺寸给出了4张额外的图片。

<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 措施来表示窗口宽度。

由于我们这样做，我们也需要使用sizes 属性。

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

在这个例子中，sizes 属性中的(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px 字符串描述了与视口有关的图像的大小，多个条件用逗号隔开。

媒体条件max-width: 500px 设置了与视口宽度相关的图像大小。简而言之，如果窗口大小<500px，它就以窗口大小的100%渲染图像。

如果窗口尺寸更大，但<900px ，它将以窗口尺寸的50%渲染图像。

如果再大一点，它就以800px的尺寸渲染图像。

vw 这个计量单位对你来说可能是新的，简而言之，我们可以说，1vw 是窗口宽度的1%，所以100vw 是窗口宽度的100%。

一个生成srcset 和逐渐变小的图像的有用网站是responsivebreakpoints.com/。