1

我在使用 srcset 时有一种奇怪的行为，我很难理解它。我已经完成了 CodePen：http ://codepen.io/anon/pen/dYBvNM

问题是我有一组不同尺寸的图像（由 Shopify 生成）：240 像素、480 像素、600 像素和 1024 像素。问题是这些是最大尺寸。这意味着如果商家上传较小的图片（比如 600 像素），则 1024 像素版本将是 600 像素，而不是 1024 像素。我不能提前知道，所以我不得不简单地将所有尺寸添加为“最佳情况”：

<img
     src="my_1024x1024.jpg"
     srcset="my_240px.jpg 240w, my_480px.jpg 480w, my_600px.jpg 600w, my_1024px 1024w"
     sizes="(max-width: 35em) 100vh, 610px"
     >

当图像确实小于预期的最大尺寸时，就会发生奇怪的事情。在这种情况下，浏览器会正确选择适当的图像（在这种情况下，它将选择 15' Retina 上的 1024 版本），但由于图像实际上小于 1024px（我已经指出的大小），浏览器实际上是将图像的大小调整为小于其原始分辨率。

您可以在 CodePen http://codepen.io/anon/pen/dYBvNM中比较这两个图像是 1024px 版本，但是在使用 srcset 的那个中，渲染实际上比仅使用 src 小。我本来希望它会以原始分辨率保留图像。

你能解释一下为什么会这样吗？

谢谢！

4

1 回答 1

2

它的工作方式是通过将给定值除以sizes属性的有效大小，将“w”描述符计算为“x”描述符。例如，如果选择 1024w 并且大小为 610px，则 1024/610 = 1.67868852459016x，这就是浏览器将应用的图像的像素密度。如果图像实际上不是 1024 像素宽，浏览器仍将应用相同的密度，这将“缩小”图像，因为在图像宽度和“w”描述符匹配的有效情况下，这是正确的做法.

您必须使描述符与资源宽度匹配。当用户上传图像时，您可以检查其宽度并将其用作最大的描述符sizes（如果它小于 1024），并删除大于给定图像宽度的描述符。

于 2015-11-26T11:35:11.203 回答