srcset和大小的图像不加载我期望的图像

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的大小远低于300px，Chrome（几乎是一致的）总是选择大图像。 我在开发人员工具>检查器>属性> img> currentsrc中检查了此答案中指出的内容

谁能帮我？

Answer 1

我想我知道了。 似乎媒体查询没有达到我的预期。

例如，使用以下规则：

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

人们会认为

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

这不是它的工作原理，至少在实践中没有。 我认为浏览器只是在寻找一条评估结果为true的规则，并称之为一天。

这样就可以了：

• 第一条线是正确的！ 做完了！ 应用规则！ 简单！

当我想到规则并考虑逻辑时得出的结果时，突然觉得浏览器坚持使用最大图像是有意义的，因为我在第一行使用的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" />

这是上面的一个工作示例： image srcset示例（工作）

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

注意＃2：与原始问题相比，为了进行调试，我添加了更多的源图像。 我认为使用两个大小来简化它会更容易，但是如果我不添加一堆，我想我永远都不会想到。 当我只有2张图像时，我认为它总是选择最大的图像。 那是不对的，它只是从未选择我期望的图像;）