CSS 中的响应式图像

随着移动设备的普及，响应式设计越来越受到关注。在响应式设计中，图像的大小和分辨率也需要根据设备进行适配。CSS 中的响应式图像可以让我们在不同大小和分辨率的设备上显示出适当的图像。

srcset 属性

srcset 属性用于定义一组备用图像，并根据设备的分辨率来选择使用哪个图像。每个备用图像都用一个 URL 和一个描述性的宽度宣告来指定。

<img src="image.png"
     srcset="image-1x.png 1x,
             image-2x.png 2x,
             image-3x.png 3x"
     alt="Image">

在上面的例子中，srcset 属性包含了三个备用图像，每个宣告指定了图像的 URL 和一个描述性的宽度宣告。这些宽度宣告告诉浏览器图像适合什么设备。在这个例子中，宽度宣告分别是 1x、2x 和 3x，表示分辨率分别为 1 倍、2 倍和 3 倍屏幕像素密度的设备。浏览器会根据设备的分辨率来选择合适的图像。在一个 2 倍像素密度的设备上，会选择 image-2x.png。

sizes 属性

sizes 属性为浏览器提供了一个提示，告诉它如何在不同的窗口大小下选择哪个图像。sizes 属性接受一个由一个或多个媒体条件和描述性宽度宣告组成的逗号分隔列表。

<img
  srcset="image-320w.png 320w,
          image-640w.png 640w,
          image-1280w.png 1280w"
  sizes="(max-width: 600px) 480px,
         800px"
  alt="Image">

在上面的例子中，sizes 属性列表中有两个项目。第一个项目指定了一个媒体查询 (max-width: 600px) 和描述性的宽度宣告 480px。这意味着如果窗口的最大宽度小于 600 像素，图像应该显示为 480px 宽度。第二个项目指定描述性宽度宣告 800px。这个宽度宣告告诉浏览器，在所有其他情况下，图像应该显示为 800px 宽度。

<picture> 元素

<picture> 元素允许我们定义一个或多个 <source> 元素和一个 <img> 元素。浏览器会根据 <source> 元素中的条件选择一个最合适的图像，然后使用 <img> 元素来显示该图像。

<picture>
  <source media="(min-width: 800px)" srcset="big-image.png">
  <source media="(min-width: 600px)" srcset="medium-image.png">
  <img src="small-image.png" alt="small image">
</picture>

在这个例子中，如果浏览器的最小宽度大于 800px，那么它会使用 big-image.png。如果最小宽度大于等于 600px，但小于等于 800px，则会使用 medium-image.png。否则，它将使用 <img> 元素中的 src 属性所指定的 small-image.png。如果浏览器不支持 <picture> 元素，它将忽略该元素并使用 <img> 元素中的图像。