Img与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]

但无论我尝试什么，Chrome（差不多，为了保持一致性）总是选择大图像，即使屏幕上img的大小远低于300px。我在开发者工具＆gt;中检查过这个检查员＆gt;属性＆gt; img＆gt;在this answer

中指出的currentsrc

任何人都可以帮助我吗？

Answer 1

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

例如，使用以下规则：

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

人们会认为

• 当屏幕＆gt;行＃1为真时1px宽
• 当屏幕＆gt;行＃2为真时480px，重写第1行
• 当屏幕＆gt;行＃3为真时768px，重写第1行和第2行

这不是它的工作方式，至少在实践中并非如此。我认为浏览器只是查找一个评估为true的规则并将其称为一天。

所以它就是这样：

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

注意：一旦浏览器加载了较大的图像，它就不愿意加载较小的图像。这就是＆＃39;力量刷新＆＃39;按钮是为。

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