为什么srcset调整图像大小？

Question

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

问题是，我有一组图像（即Shopify生成）的各种尺寸：240px，480px，600px和1024px。问题是这些是最大尺寸。这意味着如果商家上传较小的图片（比方说600px），1024px版本将是600px，而不是1024px。我不知道，在前进，所以我不得不简单地添加所有的大小为“最好情况”：

<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'视网膜上的1024版本），但由于图像实际上小于1024像素（我指出的大小），浏览器实际上是将图像的大小调整为小于其原始分辨率。

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

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

谢谢！

Answer 1

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

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