响应式图片 #

一种可以在不同的屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片。

分辨率切换：不同的尺寸 #

显示相同的图片内容，仅仅依据设备来显示更大或更小的图片

srcset 和 sizes，来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。

<img
  srcset="
    elva-fairy-320w.jpg 320w,
    elva-fairy-480w.jpg 480w,
    elva-fairy-800w.jpg 800w
  "
  sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy"
/>

srcset 定义了允许浏览器选择的图像集，以及每个图像的大小。 #

• 一个文件名 (elva-fairy-480w.jpg.)
• 一个空格
• 图像的固有宽度（以像素为单位）（480w）。注意，这里使用宽度描述符 w，而非你可能期望的 px。这是图像的真实大小，可以通过检查你电脑上的图片文件找到（例如，在 Mac 上，你可以在 Finder 上选择这个图像，然后按 Cmd + I 来显示信息）

sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择 #

• 一个媒体条件（(max-width:480px)）当可视窗口的宽度是 480 像素或更少
• 一个空格
• 当媒体条件为真时，图像将填充的槽的宽度（440px）

有了这些属性，浏览器会：

• 查看设备宽度
• 检查 sizes 列表中哪个媒体条件是第一个为真
• 查看给予该媒体查询的槽大小
• 加载 srcset 列表中引用的最接近所选的槽大小的图像

分辨率切换：相同的尺寸，不同的分辨率 #

srcset 和 x 语法结合，而不用 sizes，来选择适当分辨率的图片。

<img
  srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
  src="elva-fairy-640w.jpg"
  alt="Elva dressed as a fairy"
/>