html - 带有 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)宽度测试了它们，然后在浏览器中验证了图像的大小，并进行了数学计算。

为了完整起见，这是它的作用:

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

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

谁能帮帮我？

Answer 1

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

例如，使用这些规则:

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


有人会认为

• 第 1 行在屏幕 > 1px 宽时为真
• 当屏幕 > 480px 时第 2 行为真，覆盖第 1 行
• 当屏幕 > 768px 时第 3 行为真，覆盖第 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) ...
"


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

所以这就是我最后的结果:

<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 张图像时，我认为它总是选择最大的。这不是真的，它从来没有选择我期望的图像 ;)