html - 为什么我的 img 元素总是从 srcset 加载最大的图像

Question

因此，我正在尝试制作一个响应式图像组件，该组件将根据屏幕分辨率/像素密度加载适当大小的图像。据我了解， srcset 属性正是为此而设计的，但我无法让它做我想做的事。我究竟做错了什么？这是渲染到 DOM 的元素:

<img src="/static/media/image2_1x.20b2e636.png" srcset="/static/media/image2_05x.198c1f0f.png 590w, /static/media/image2_1x.20b2e636.png 1180w, /static/media/image2_2x.632d77c5.png 2360w" sizes="(max-width: 1180px) 90vw, 1180px">

我希望这个元素做的是，当屏幕尺寸大于 1180 像素时，它会加载一个合适的 1180 像素宽度的图像。如果在高密度设备上显示，这里可能会加载2x图像(2360w)，但通常会加载1x图像(1180w)，当屏幕尺寸较小时，它应该计算90vw是多少px并根据像素密度和屏幕上 90vw 的像素数选择三个图像中最合适的一个。

实际发生的是该元素始终加载最大的图片(2360w 的图片)。即使我在我的 chrome 开发工具中打开响应模式并将屏幕宽度缩小到 300px 清除缓存并重新加载它仍然加载 2x 一个。

我尝试了多种尺寸属性。如果我将尺寸设置为 500px，它会将图像显示为 500px 宽，但它仍会加载 2x 图像。

为什么会这样？我做错了吗？当图像宽度为 300 像素且不需要高分辨率版本时，如何使其加载 0.5 像素的图像？

Answer 1

好的，所以我想通了。原来这是 chrome 开发工具的一个错误。当我更改大小属性时，它不会更新元素的行为，直到我退出响应模式并再次进入它，重新加载和清除缓存不起作用，只能退出并进入响应。希望这可以帮助遇到此问题的其他人。该元素实际上工作得很好。