自适应图片

分辨率切换

不同尺寸，相同分辨率

在元素中使用两个新的属性 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单位。这是图像的真实大小，可以通过检查你电脑上的图片文件找到

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

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

如果浏览器支持视窗宽度为480px来加载页面，那么 (max-width: 480px) 的媒体条件为真，因此 440px 的槽会被选择，所以 elva-fairy-480w.jpg 将加载，因为它的的固定宽度480w 最接近于 440px。

相同的尺寸, 不同的分辨率

如果你支持多种分辨率显示，但希望每个人在屏幕上看到的图片的实际尺寸是相同的，你可以让浏览器通过 srcset和 x 语法结合

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

img {
  width: 320px;
}

浏览器只是计算出正在显示的显示器的分辨率，然后提供srcset引用的最适合的图像。

美术设计

美术设计问题涉及要更改显示的图像以适应不同的图像显示尺寸。使用元素实现这一功能。

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

• 元素包含一个media属性，这一属性包含一个媒体条件。在这种情况下，如果视窗的宽度为799px或更少，第一个元素的图片就会显示。如果视窗的宽度是800px或更大，就显示第二张图片。
• srcset属性包含要显示图片的路径。
• 在任何情况下，你都必须在之前正确提供一个元素以及它的 src 和 alt 属性，否则不会有图片显示。

你可以在 中添加 type 属性，这样浏览器就能立即拒绝其不支持的文件类型：

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  ...
</picture>