带有 srcset 和大小的 Img 未加载我期望的图像

Question

我正在尝试优化一个页面，该页面由一个带有断点的图像网格组成，使其使用 1、2、3 或 4 列。

html 看起来像这样：

<img srcset=" image-300x200.jpg 300w, image-original.jpg 600w" sizes=" (min-width: 1px) calc( 100vw * (0.94 * 1.000) * 1.00 ), (min-width: 480px) calc( 100vw * (0.94 * 0.905) * 0.50 ), (min-width: 768px) calc( 100vw * (0.94 * 0.850) * 0.33 ), (min-width: 981px) calc( 100vw * (0.94 * 0.835) * 0.25 ), 280px" alt="E-Books customer service for Dutch Libraries" width="400" height="284">

calc() 函数可能看起来有点复杂，但我已经用不同的视口宽度测试了它们，然后在浏览器中验证了图像的大小并进行了数学检查。

为了完整起见，它的作用如下：

[viewport width] - [94% container width] - [column gutters] / [nr of columns]

但无论我尝试什么，即使屏幕上的 img 大小远低于 300 像素，Chrome（几乎是为了保持一致性）总是选择大图像。正如this answer 中指出的那样，我在开发人员工具 > 检查器 > 属性 > img > currentsrc 中检查了这一点

谁能帮帮我？

Answer 1

我想我明白了。似乎媒体查询没有按我的预期工作。

例如，使用这些规则：

sizes=" (min-width: 1px) ... (min-width: 480px) ... (min-width: 768px) ... "

人们会认为

• 当屏幕 > 1 像素宽时，第 1 行为真
• 当屏幕 > 480px 时，第 2 行为真，覆盖第 1 行
• 当屏幕 > 768px 时，第 3 行为真，覆盖第 1 行和第 2 行

这不是它的工作方式，至少在实践中不是。我认为浏览器只是寻找一个评估为真的规则并称之为一天。

原来如此：

• 第 1 行是真的！完毕！应用规则！简单！

当我带着这个逻辑查看我的规则和结果时，突然觉得浏览器坚持使用最大的图像是有道理的，因为我用于第一行的 calc() 函数是：

calc( 100vw * (0.94 * 1.0) * 1.0 ) - 这是windowWidth * 0.94 的复杂写法。

换句话说，浏览器假定图像始终占窗口整个宽度的 94%，并且不应用任何其他考虑断点的计算。

不管怎样，把上面的规则改成这样：

sizes=" (min-width: 1px) and (max-width: 479px) ... (min-width: 480px) and (max-width: 767px) ... (min-width: 768px) and (max-width: 980px) ... "

确保规则仅适用于特定点。每次下一行评估为真时，其他行都不会。

所以这就是我最后的选择：

<img src="image-fallback.jpg" srcset=" image-300x200.jpg 300w, image-480x320.jpg 480w, image-600x400.jpg 600w, image-960x640.jpg 960w, image-1200x800.jpg 1200w" sizes=" (min-width: 1px) and (max-width: 479px) calc( 100vw * (0.94 * 1.000) * 1.00 ), (min-width: 480px) and (max-width: 767px) calc( 100vw * (0.94 * 0.905) * 0.50 ), (min-width: 768px) and (max-width: 980px) calc( 100vw * (0.94 * 0.850) * 0.33 ), (min-width: 981px) and (max-width: 1088px) calc( 100vw * (0.94 * 0.835) * 0.25 ), (min-width: 1089px) calc( 1089px * (0.94 * 0.835) * 0.25 ), 280px" />

这是上面的一个工作示例： Image srcset example (working)

注意：一旦浏览器加载了较大的图像，就不愿意加载较小的图像。这就是“强制刷新”按钮的用途。

注意#2：为了调试，与我原来的问题相比，我添加了更多的源图像。我认为用两种尺寸保持简单会更容易，但我想如果我没有添加一堆，我永远不会想到这一点。当我只有 2 张图像时，我认为它总是选择最大的。这不是真的，它只是从来没有选择我期望的图像；）