具有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]

但是无论我尝试什么，Chrome（几乎是一致性）即使屏幕上的IMG大小远低于300px，也总是会选择大图像。我在开发人员工具> Inspector> properties> img> CurrentsRC中检查了此答案

中指出

任何人可以帮我吗？

Answer 1

我想我已经弄清楚了。看来媒体查询无法正常工作。

例如，使用以下规则：

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

一个人会假设

• 当屏幕> 1px宽
时，行＃1是正确的
• 当屏幕> 480px，覆盖行＃1
时，第2行是正确的
• 当屏幕> 768px，覆盖行＃1和＃2
时，第3行是正确的

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

所以它只是：

• 第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) ... "

确保该规则仅适用于某个点。每当下一行评估为true时，其他行都不会。

所以这是我最终所做的：

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

这是上述工作示例：图像srcset示例（工作）

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

注释＃2：对于调试我，我与原始问题相比添加了更多的源图像。我认为使用两种尺寸保持简单会更容易，但是我认为，如果我没有添加一堆，我将永远不会弄清楚这一点。当我只有2张图像时，我认为它总是选择最大的图像。事实并非如此，它永远不会选择我预期的图像;）