带有srcset和大小的Img没有加载我期望的图像
我正在尝试优化一个页面，该页面由带有断点的图像网格组成，使其使用1、2、3或4列。
html看起来像这样：
calc（）函数可能看起来有点复杂，但是我已经用不同的视口宽度测试了它们，然后在浏览器中验证了图像的大小，数学也检查了。
为了完整起见，它的作用如下：
[视口宽度]-[94%容器宽度]-[列排水沟]/[nr列]
但是无论我尝试什么，Chrome（几乎是一致性的好耶）总是选择大图像，即使屏幕上的img大小远低于300px。我在开发工具里查过了
有人能帮我吗？
共有1个答案
我想我明白了。看来媒体的质疑并不像我预期的那样有效。
例如，使用这些规则：
size="（最小宽度： 1px）...（最小宽度： 480px）...（最小宽度： 768px）..."
有人会认为
- 屏幕显示时，第1行为真
它不是这样运作的，至少在实践中不是这样。我认为浏览器只是寻找一个评估为真的规则，然后收工。
所以就这样：
- 第1行是真的！完成！应用规则！轻松点
当我带着这个逻辑查看我的规则和结果时，突然意识到浏览器坚持使用最大的图像，因为我在第一行使用的calc（）函数是：
calc（100vw*（0.94*1.0）*1.0）-这是一种复杂的书写方式windowWidth*0.94。
换句话说，浏览器假定图像始终为窗口整个宽度的94%，并且不应用任何其他考虑断点的计算。
无论如何，将上述规则更改为：
size="（最小宽度： 1px）和（最大宽度： 479px）...（最小宽度： 480px）和（最大宽度： 767px）...（最小宽度： 768px）和（最大宽度： 980px）..."
确保该规则仅适用于某一点。每次下一行的计算结果为true时，其他行都不会。
这就是我最后的结论：
下面是上面的一个工作示例：Image srcset-example（工作）
注意：一旦浏览器加载了较大的图像，它就不愿意加载较小的图像。这就是“强制刷新”按钮的作用。
注#2：为了调试，我添加了比原来问题更多的源图像。我想用两种尺寸保持简单会更容易，但我想如果我没有添加一束的话，我永远也不会明白这一点。当我只有两张图片时，我认为它总是选择最大的。那不是真的，它只是从来没有选择我期望的图像；）
-
我正在使用具有响应图像的引导。我想通过向浏览器提供多种图像大小来优化加载时间。根据本文，使用srcset这样的简单方法有助于让浏览器选择最佳图像大小： 我的问题是，将其与引导img响应类相结合，即使只需要一张小图片，也会加载一张大图片。 代码示例：Bootply。使用Chrome进行测试，它内置支持srcset支持！其他一些浏览器需要picturefill.js才能识别它。） 如果您复制图像的源（
-
问题内容： 我有一个5000 x 4000像素的图像，想要绘制到画布上。 首先，我尝试从资源中加载它。我把它放进去了。 我使用以下方法： 它像魅力一样运作。 在这种情况下，是。 所以现在我想从sdcard加载它。 这是我尝试做的事情： 在这种情况下，是，创建时得到了。 所以我想知道： 有没有一种方法可以加载图像而不会出现该错误？还是有办法将a转换为？ 注意： 我不想调整图像的大小，因为我正在实现缩
-
很长一段时间以来，我使用picture element处理每个视口中不同大小的响应图像。它工作得很好，但现在我不得不切换到响应
-
我正在尝试根据设备宽度提供响应/自适应图像。 原始图像： 与Srcset： 我面临两个问题： 1）即使在较小的设备上（如iPhone 6s），也会加载宽度为2000px的图像（它应该加载800px图像）。 2）我已经把两个图像（有和没有srcset）放在一起。它们都加载了具有相同维度的图像。然而，与其他版本相比，带有srcset的版本显得较小。因为html/css中没有指定宽度，所以它应该以实际图
-
问题内容： 我了解如何使用精灵，但是IMG标签不是必需的“ src”属性吗？我总是可以使用SPAN或其他标签并设置background / width / etc，但从语义上讲不会正确。 基本上，我想为IMG标签省略SRC，而只使用精灵，但是我担心HTML在技术上因此无效。谢谢。 问题答案： 关于语义正确性： 当图像具有语义时， 因此被认为是内容，请 使用IMG标签 （不带图片）和正确设置的ALT
-
我想使用Android数据绑定设置图像。我已经阅读了很多关于这方面的教程，但图片仍然没有出现。 在我的模型中，我有以下方法： 我还应该提到“III”、“Image-”url永远不会打印，所以问题不在于Glide。 这是我的xml： maleIcon是一个url字符串