为什么srcset会调整图像大小？

Question

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

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

<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＆＃33; Retina上选择1024版本），但因为图像实际上小于1024px（我指示的尺寸） ），浏览器实际上是将图像的大小调整为小于其原始分辨率。

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

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

谢谢！

Answer 1

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

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