为什么 srcset 调整图像大小？

Question

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

问题是我有一组不同尺寸的图片（Shopify 生成的图片）：240 像素、480 像素、600 像素和 1024 像素。问题是那些是最大尺寸。这意味着如果商家上传较小的图片（假设为 600 像素），则 1024 像素版本将为 600 像素，而不是 1024 像素。我无法提前知道，所以我不得不简单地将所有尺寸添加为 "best case":

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

当图像确实小于预期的最大尺寸时，就会出现奇怪的情况。在这种情况下，浏览器正确 select 适当的图像（在这种情况下，它将 select 15' 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 像素宽，浏览器仍将应用相同的密度，这将 "shrink" 图像，因为在图像宽度和 [=17] 的有效情况下这是正确的做法=]描述符匹配。

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

为什么 srcset 调整图像大小？

Why does srcset resize image?

srcset