我正在尝试优化由包含断点的图像网格组成的页面,该断点使其使用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.我在开发人员工具>检查器>属性> img> currentsrc中检查了这一点,如本答案所述
谁能帮我？
我想我明白了。媒体查询似乎没有按我的预期工作。
例如，使用以下规则：
sizes="
(min-width: 1px) ...
(min-width: 480px) ...
(min-width: 768px) ...
"
人们会假设
这不是它的工作原理，至少在实践中不是这样。我认为浏览器只是寻找一条计算结果为 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 example (working)
注意：一旦浏览器加载了较大的图像，它就不愿意加载较小的图像。这就是“强制刷新”按钮的用途。
注意#2：为了调试，与原来的问题相比，我添加了更多的源图像。我认为用两种尺寸来保持简单会更容易，但我想如果我没有添加一堆，我永远不会弄清楚这一点。当我只有两张图片时，我认为它总是选择最大的一张。那不是真的，它只是从未选择我期望的图像；）