响应式IMG标签的问题：浏览器选择错误的尺寸顺序

Question

首先，我想提一下，我确实阅读并检查了我在这里找到的有关此问题的所有文章，但不幸的是，它们都没有足够清楚或为我解决问题。

对于此问题，没有明确的解释 +解决方案，这是图像中非常受欢迎的问题。

• 使用＆lt; picture＆gt;标签我可以实现目的，浏览器将 根据最大宽度媒体规范加载正确的图像。

• 使用＆lt; img /＆gt; < /code>标记浏览器随机选择，无论大小如何 指定尺寸的顺序。

在这种情况下，我需要使用＆lt; img /＆gt; < /code>。考虑简单标头图像的以下代码：

<img 
    width="1400px" height="230px" 
    class="page-header-image" alt="" 
    src="/wp-content/uploads/z8poevCA-1.jpeg" 
    srcset="/wp-content/uploads/z8poevCA-2.jpeg 1200w,
    /wp-content/uploads/z8poevCA-3.jpeg 992w, 
    /wp-content/uploads/z8poevCA-4.jpeg 768w,
    /wp-content/uploads/z8poevCA-5.jpeg 576w, 
    /wp-content/uploads/z8poevCA-6.jpeg 230w" 
    sizes="(min-width: 1200px) 1200px, (min-width: 992px) 992px, (min-width: 768px) 768px, (min-width: 576px) 576px, (min-width: 230px), 230px" />

上面对我的翻译为：

• src中的默认图像大小为宽度=“ 1400px” height =“ 230px” load： z8poevca-1 .jpeg
• xx-large设备（较大的台式机，1400px及以上）负载： Z8POEVCA-1 .jpeg
• x-large设备（大台式机，1200px及以上）： Z8POEVCA-2 .jpeg .jpeg
• .jpeg设备（台式机，992px及向上）负载： Z8POEVCA-3 .jpeg
• 中型设备（片剂，768px及以上）负载： Z8POEVCA-4 .jpeg
• 小型设备（景观手机） ，576px及以上）负载： Z8POEVCA-5 .jpeg
• x-small设备（肖像电话，小于576px）负载： Z8POEVCA-6 .jpeg

。例如，在400px的移动屏幕上选择图像的1200W版本；这是错误的。以上功能与＆lt; picture＆gt;标签，所以我怀疑这些尺寸是否为“错误” - 除非＆lt; img /＆gt; < /code>标签的工作方式不同。

以上只是一个示例，因为我尝试了许多大小的组合与＆lt; img /＆gt; < /code> tag;一切都错了。我还尝试了： https://responsivebreakpoints.com/ ，而工具是“酷”，但它是使用＆lt; picture＆gt;，它缺少大小。

我还想提及该文档正在使用元标记：

<meta name="viewport" content="width=device-width, initial-scale=1" />

这是CSS（如果需要）：

.page-header-image, .page-header-image img {
    width: 100%;
    height: 100%!important;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

演示：

<img 
    width="1400px" height="230px" 
    class="page-header-image" alt="" 
    src="https://via.placeholder.com/1400x230" 
    srcset="https://via.placeholder.com/1200x200 1200w,
    https://via.placeholder.com/992x130 992w, 
    https://via.placeholder.com/768x100 768w,
    https://via.placeholder.com/576x90 576w, 
    https://via.placeholder.com/230x90 230w" 
    sizes="(min-width: 1200px) 1200px, (min-width: 992px) 992px, (min-width: 768px) 768px, (min-width: 576px) 576px, (min-width: 230px), 230px" />

请阐明此问题，因为这将帮助许多遇到此问题的用户。

谢谢

Answer 1

在Windows 10上使用Firefox中的给定摘要，每次为我显示“正确”图像的大小（Windows 10）。

但是，在Chrome/Edge上，每次都显示较大的图像（1200px），但是我将窗口（或IMG元素宽度）制作出来。

这似乎是一个缓存问题。

如果我清除镀铬浏览器的高速缓存，并在已经很小的窗口上运行摘要，则显示正确的图像，并且随着我增加窗口宽度，正确的图像将被连续显示，直到达到1200px中的最大图像。

如果我重新运行相同的实验，则会立即显示1200px图像。浏览器以某种方式说：“我已经有了一个至少与那样大的图像，所以我会证明而不是较小的图像”。

希望有人可以找到正在发生的事情的更正式的描述。

基本上，您的代码很好。系统（至少在W10上的Chrome/Edge）只会在觉得它必须的情况下烦恼并获取另一个图像，因此用户不会不必要地使用其网络津贴。我不知道是否有一种方法告诉其他浏览器这样的浏览器也这样做。