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

因此，我试图制作一个响应性好的图像组件，根据屏幕分辨率/像素密度加载适当大小的图像。据我所知，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">

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

实际上，元素总是加载最大的图片（2360w）。即使我在chrome开发工具中打开响应模式并将屏幕宽度缩小到300px，清除缓存并重新加载时，它仍然会加载2倍的缓存

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

---

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

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