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

我想优化一个页面，其中包含一个网格的图像与断点，使其使用1,2,3或4列。图像与srcset和大小不加载图像我期望

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

的计算（）函数可能看起来有点复杂，但我已经用各种视宽度对它们进行测试，然后在浏览器中验证了图像的大小和数学检查。

为了完整起见，这里就是它的作用：

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

但无论我尝试，铬（差不多了，耶一致性）总是选择大的图像，即使在屏幕上IMG的大小以及低于300px。我在开发人员工具> inspector>属性> img>> currentrc中检查了这一点，正如this answer

任何人都可以帮助我吗？

来源

2016-11-28 REJH

这段代码本身不足以复制问题。你能提供一个解决问题的[mcve]吗？ –

当然，我会立即更新帖子，只要我在电脑后面 – REJH

heh。构建示例代码的种类使我找到答案的轨道。在下面发表。感谢提问：D – REJH

我想我想通了。媒体查询似乎不像我预期的那样工作。

例如，与这些规则：

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

一个会认为

线＃1为真时屏幕> 1px的宽
线＃2为真时屏幕> 480px，覆盖线＃1
当屏幕> 768px，覆盖第1行和第2行时，第3行为true

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

所以它只是：

1号线是真的！完成！应用规则！简单！

当我看着我的规则，并充分考虑这一逻辑的结果，它突然有意义了在浏览器上使用的最大的图像，因为我使用的第一行中的钙（）函数是坚持：

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

确保该规则只适用到某一点。每当下一行评估为真，其他行就不会。

原来这就是我到底去：

下面是上述的工作示例： Image srcset example (working)

注意：一旦浏览器加载一个较大的图像，它不愿加载较小的。这就是'强制刷新'按钮的用途。

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

来源

2016-11-29 13:18:01 REJH

哦，顺便说一句，你可能会按照相反的顺序（从大到小）编写规则，所以你不需要'使其他线路无效'，但是..我喜欢考虑移动并按照自己的方式工作，而不是另一种方式。所以这在我的工作流程中更有意义:) – REJH

对于移动优先的方法，你只需要使用'max-width'，然后你就可以在不用'min-width'的情况下工作;） –

嗯，。在CSS中，这意味着我不得不一遍又一遍地重新定义所有的默认值。我通常会为小屏幕设置默认设置，然后按照我的方式进行操作，并只更改大屏幕所需的内容:) – REJH

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

回答

相关问题