使用 srcset 属性的响应式图像

使用带有大小的 srcset

<img sizes="(min-width: 1200px) 580px,
      (min-width: 640px) 48vw,
      98vw"
    srcset="img/hello-300.jpg 300w,
      img/hello-600.jpg 600w,
      img/hello-900.jpg 900w,
      img/hello-1200.jpg 1200w"
    src="img/hello-900.jpg" alt="hello">

sizes 就像媒体查询一样，描述了视口对图像的占用空间。

• 如果视口大于 1200px，则图像正好是 580px（例如，我们的内容集中在容器中，最大宽度为 1200px。图像占其中的一半减去边距）。
• 如果视口位于 640px 和 1200px 之间，则图像占视口的 48％（例如，图像与我们的页面缩放，并占视口宽度的一半减去边距）。
• 如果视口是任何其他大小，在我们的情况下小于 640px，图像占视口的 98％（例如图像缩放与我们的页面并取视口的全宽减去边距）。最后一项必须省略介质条件。

srcset 只是告诉浏览器我们有哪些图像，以及它们的大小。

• img/hello-300.jpg 宽 300px，
• img/hello-600.jpg 宽 600px，
• img/hello-900.jpg 宽 900px，
• img/hello-1200.jpg 宽 1200px

src 始终是强制性图像源。在使用 srcset 的情况下，如果浏览器不支持 srcset，src 将提供后备图像。

使用没有大小的 srcset

<img src="img/hello-300.jpg" alt="hello"
     srcset="img/hello-300.jpg 1x, 
       img/hello-600.jpg 2x,
       img/hello-1200.jpg 3x">

srcset 提供可用图像列表，设备像素比为 x 描述符。

• 如果设备像素比为 1，请使用 img/hello-300.jpg
• 如果设备像素比为 2，请使用 img/hello-600.jpg
• 如果设备像素比为 3，请使用 img/hello-1200.jpg

src 始终是强制性图像源。在使用 srcset 的情况下，如果浏览器不支持 srcset，src 将提供后备图像。