使用 SrcSet 来响应图像 - 只有最大的图像被称为[关闭]

Question

我正在尝试在网站上使用 SrcSet 来响应图像，但只调用最大的图像。你知道这里出了什么问题吗？

<img src="https://eg.com/example.jpg?auto=format" 
srcset="https://eg.com/example.jpg?auto=format&amp;w=320 320w, 
https://eg.com/example.jpg?auto=format&amp;w=480 480w, 
https://eg.com/example.jpg?auto=format&amp;w=800 800w, 
https://eg.com/example.jpg?auto=format&amp;w=1024 1024w, 
https://eg.com/example.jpg?auto=format&amp;w=1400 1400w, 
https://eg.com/example.jpg?auto=format&amp;w=1900 1900w" sizes="(max-width: 320px) 320px, 
            (max-width: 480px) 480px, 
            (max-width: 800px) 800px,
            (max-width: 1024px) 600px,
            (max-width: 1400px) 800px,
            (max-width: 1900px) 900px, 
            1024px" alt="">

我在其他网站上看到过这项工作，我尝试模仿那里的代码，但无论浏览器大小如何，都只会调用最大的图像。

Answer 1

这可能不是您的代码的实际问题。有几个因素会影响浏览器如何决定使用

srcset

中的哪个图像。 srcset 上的 MDN 页面注释了以下内容（强调我的）：

1. 查看屏幕尺寸、像素密度、缩放级别、屏幕方向和网络速度。
2. 找出尺寸列表中第一个正确的介质条件。
3. 查看为该媒体查询指定的槽大小。
4. 加载 srcset 列表中引用的与插槽大小相同的图像，或者如果没有，则加载第一个大于所选插槽大小的图像。

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

同一页面还指出了测试时的以下注意事项（再次强调我的）：

注意：在使用桌面浏览器进行测试时，如果将窗口设置为最窄宽度时浏览器无法加载较窄的图像，请查看视口是什么（您可以通过进入浏览器的 JavaScript 控制台并输入 document.querySelector('html').clientWidth)。不同的 浏览器都有最小尺寸，它们可以让您将窗口宽度减小到 ，并且它们可能比您想象的更宽。使用移动浏览器进行测试时，您可以使用 Firefox 的 about:debugging 页面等工具来使用桌面开发人员工具检查移动设备上加载的页面。

要查看加载了哪些图像，您可以使用 Firefox DevTools 的 Network Monitor 选项卡或 Chrome DevTools 的 Network 面板。对于 Chrome，您可能还需要禁用缓存以防止它选择已下载的图像。