如何使用srcset和sizes实现响应式图片

Question

我有以下的吸附点：480px、900px、1800px、2400px。

以及这段标记：

<img
 sizes="(max-width: 2400px) 100vw, 2400px"
 srcset="
  boat-480.jpg 480w,
  boat-900.jpg 900w,
  boat-1800.jpg 1800w,
  boat-2400.jpg 2400w"
 src="boat-2400.jpg"
 alt="This is a boat">

我该如何让响应式图片正常工作？

- user5671193

---

iPhone正在运行哪个iOS版本？ - Joachim Isaksson

它正在运行最新版本，9.2.1。 - user5671193

你可能会发现这篇文章末尾很有帮助：https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ - Carol McKay

@CarolMcKay，你是在看关于给出明确指示的<picture>部分，而不是像我所做的那样让浏览器决定吗？ - user5671193

在“何时？”标题下的最后一段中，有can-i-use、polyfills和另一个链接。 - Carol McKay

我认为这可能是情况，但现在还很早。我会尝试使用polyfill并看看我能做些什么。谢谢。 - user5671193

Answer 1

1. 基础知识

设备像素比

设备像素比是每个CSS像素的设备像素数，它与以下因素有关：

• 设备的像素密度（每英寸物理像素数）
• 浏览器的缩放级别 因此，更高的像素密度和/或更高的缩放级别 会导致更高的设备像素比。

---

srcset属性和x描述符

在<img>标签上，srcset属性中的x描述符用于定义设备像素比。所以在:

<img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x">

• 设备像素比为 1 时，将使用图像 image-1x.jpg。
• 设备像素比为 2 时，将使用图像 image-2x.jpg。
• 设备像素比为 3 时，将使用图像 image-3x.jpg。
• 如果没有匹配项，则使用回退的 src 属性（image.jpg）。

srcset 属性和 w 描述符

如果您希望在较大或较小的视口上显示不同的图像，请使用 srcset 中的 w 描述符和一个新的属性 （sizes）：

<img src="image.jpg" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">

这段内容提到第一张图片的宽度为200px，第二张图片的宽度为400px，第三张图片的宽度为600px。另外，如果用户的屏幕宽度为150 CSS像素，那么这对应于以下x描述符：

<img src="image.jpg" srcset="image-1x.jpg 1.33x, image-2x.jpg 2.67x, image-3x.jpg 4x">

sizes属性

在不同的屏幕尺寸上使用不同大小的图像（高度、宽度不同）的实际实现是通过使用sizes属性以及srcset属性的w描述符来完成的。

<img src="image.jpg" sizes="50vw" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">

如果浏览器宽度为500 CSS像素，图像将会显示为250px宽(因为使用了50vw)。现在，这相当于指定：

<img src="image.jpg" srcset="image-1x.jpg 0.8x, image-2x.jpg 1.6x, image-3x.jpg 2.4x">

因此，对于 1.5x 的显示器，浏览器将下载 image-2x.jpg，因为它提供了 设备像素比 为 1.6x（最适合 1.5x 显示器）。

2. 回答你的问题

你提到你模拟了一个 480px 的CSS宽度屏幕。

因为您将 sizes 设置为 100vw，这相当于指定：

<img src="boat-2400.jpg" srcset="
     boat-480.jpg 1x,
     boat-900.jpg 1.88x,
     boat-1800.jpg 3.75x,
     boat-2400.jpg 5x">

你有可能拥有 3x 的显示屏，因此浏览器会下载 boat-1800.jpg 文件。

问题

奇怪的是，在我在 iOS 的 Chrome 上测试时，浏览器实际下载了更令人担忧的 boat-2400.jpg。

这是由于您的 iOS 设备具有较高的 设备像素比，可能接近 5。

我错过了什么吗？

我认为没有。

我想象我不需要使用 sizes 属性，因为我已经在所有视图中将图像设置为 100vw

sizes 属性的默认值为 100vw。但是如果您想要使用 w 描述符，并且想要将 sizes 设置为除 100vw 以外的其他内容，则需要使用 sizes 属性。

- Peyman Mohamadpour