图像 srcset 定义未按预期工作答案

【问题标题】：Image srcset definition not working as expected图像 srcset 定义未按预期工作
【发布时间】：2021-10-28 13:31:57
【问题描述】：

我正在尝试根据设备的视口显示不同的图像大小。在我的具体情况下，我想为小于 600 像素的视口显示一个小图像，为大于 600 像素的视口显示一个更大的图像。

这是我想出但似乎不起作用的代码：

<IMG srcset="small.png 400w, big.png 700w" sizes="(max-width: 600px) 400px, 700px" src="big.png" width="700" height="932" border="0" class="expimgbanners" alt="Let It Be">

我已经用不同的设备和 Chrome 开发者工具对其进行了测试，但无论视口大小，我总是得到显示的大图像（名为 big.png 的图像）。

下面是一个活生生的例子： https://www.virtualsheetmusic.com/test-img.html

有什么想法吗？

【问题讨论】：

小心使用 chrome 开发者工具，除非你将 DPR 设置为 1，否则它很可能会使用更高的 DPR 并以双倍（甚至三倍）分辨率自动加载内容。
好的，但是如果我想无论分辨率如何都显示小图像怎么办？那可能吗？如果是这样，怎么办？谢谢。
您的定义是正确的，但是在使用 srcset 和 sizes 时，您实际上无法强制执行任何操作。您所做的是为浏览器提供不同的图像（srcset），并告诉它您的图像在页面上实际显示的大小（大小）。其他一切都取决于浏览器。例如，如果您已经加载了较大的图像，浏览器将不会加载较小的图像，因为它已经有一个合适的图像并且不会加载另一个分辨率较小的图像。
实际上，在使用 chrome devtools 和 DPR 1 测试您的示例时，它确实可以正确加载 small.png 直到 600px 宽度，然后在您至少 601px 宽度时加载 big.png。
我已经添加了关于我认为如何正确测试您的代码的详细答案。

标签： html css

【解决方案1】：

您的代码运行良好。

我认为你可能测试错了。检查您的开发工具中的 DPR 设置：

确保将其设置为“1”：

使用该设置后，您会发现一切正常：

601px 以上：

【讨论】：

谢谢，这澄清了我遇到的问题。但无论如何，无论设备的屏幕分辨率如何，是否可以“强制”浏览器使用较小的图像？
那么，如果您打算强制它始终使用较小的图像，为什么要提供两个图像让浏览器决定哪个是最好的？我的意思是，你绝对可以，删除 srcset 和 sizes 属性，只添加较小的图像作为 src 属性
也许使用带有多个source标签的picture标签，这些标签使用媒体查询可以解决你的问题？见stackoverflow.com/questions/56073781/…也许
好的，我明白了。我将尝试并看看我会想出什么。再次非常感谢大家！