我在使用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版本），但是由于该图像实际上小于1024px（我已指出的尺寸），因此浏览器实际上是将图像的大小调整为小于其原始分辨率。
您可以在CodePen http://codepen.io/anon/pen/dYBvNM中比较这两个图像是1024px版本，但在使用srcset的图像中，渲染实际上比仅使用src的渲染小。我曾期望它将使图像保持其原始分辨率。
您能解释一下为什么吗？
谢谢！
它的工作方式是通过将给定值除以sizes属性的有效大小，将“ w”描述符计算为“ x”描述符。因此，例如，如果选择1024w，尺寸为610px，则1024/610 = 1.67868852459016x，这是浏览器将应用的图像的像素密度。如果图像实际上不是1024像素宽，那么浏览器仍将应用相同的密度，这将“缩小”图像，因为在有效情况下，当图像宽度和'w'描述符匹配时，这是正确的做法。
您必须使描述符与资源宽度匹配。用户上载图像时，您可以检查其宽度并将其用作最大的描述符sizes（如果它小于1024），并删除大于给定图像宽度的描述符。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句