响应式IMG标签的问题:浏览器选择错误的大小顺序

Question

首先我想说的是，我确实阅读并检查了所有我能在这里找到的关于这个问题的文章，但不幸的是，没有一篇文章足够清楚，也没有一篇文章能为我解决这个问题。

这个问题没有明确的解释和解决方案，这是一个非常受欢迎的图像问题。

• 使用<picture>标签我可以达到目的，浏览器也会根据最大宽度媒体规格加载正确的图像。

• 使用<img />标签，浏览器随机选择，无论大小或指定的大小顺序。

本场景需要使用<img />。考虑下面的简单头图像代码:

<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默认图像大小为width="1400px"身高="230 px"负载:z8poevCA-1jpeg
• xx -大型设备(更大的桌面，1400px及以上)加载:z8poevCA-1jpeg
大型设备(大型桌面，1200px及以上)加载:z8poevCA-2jpeg
• 大型设备(桌面，992px及以上)加载:z8poevCA-3jpeg
• 中型设备(平板电脑，768px及以上)加载:z8poevCA-4jpeg
• 小型设备(风景手机，576px及以上)加载:z8poevCA-5jpeg
• x小型设备(纵向手机，小于576px)加载:z8poevCA-6jpeg

但是，浏览器会选择例如在手机屏幕上400px的1200w版本的图像;这是错误的。以上与<picture>标签，所以我怀疑尺寸是"错误的"。-除非<img />标签的工作方式不同。

以上只是一个例子，因为我已经尝试了许多不同的<img />标签的大小组合;一切都错了。我也试过:https://responsivebreakpoints.com/，而工具是"酷";它正在使用<picture>，并且缺少大小。

我还想提到的是，该文档正在使用meta标签:

<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元素宽度)设置得多么小。

这似乎是一个缓存问题。

如果我清除Chrome浏览器的缓存并在一个已经很小的窗口上运行代码片段，则显示正确的图像，并且随着我增加窗口宽度，正确的图像将依次显示，直到它达到最大的1200px。

如果我重新运行相同的实验，1200px的图像会立即显示出来。不知怎么的，浏览器说:"我已经有了一张至少和你想要的一样大的图片，所以我将显示它，而不是得到一个更小的"。

希望有人能找到一个更正式的描述。

基本上，你的代码是好的。系统(至少是W10上的Chrome/Edge)只会在它觉得有必要的时候才会去获取另一张图片，所以用户不会不必要地使用他们的网络空间。我不知道是否有一种方法可以告诉其他浏览器，比如FF，做同样的事情。