为什么我的 img 元素总是从 srcset 加载最大的图像
Why is my img element always loading the biggest image from srcset
因此，我正在尝试制作一个响应式图像组件，该组件将根据屏幕 resolution/pixel 密度加载适当大小的图像。据我了解， 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。
我尝试了多种尺寸属性。如果我将尺寸设置为 500 像素，它会将图像显示为 500 像素宽，但仍会加载 2 倍图像。
为什么会这样？我做错了吗？当图像宽度为 300 像素并且不需要高分辨率版本时，如何让它加载 0.5 像素？
好的，所以我明白了。事实证明这是 chrome 开发工具的错误。当我更改大小 属性 时，它不会更新元素的行为，直到我退出响应模式并再次进入它，重新加载和清除缓存不起作用，只能退出并进入响应模式。希望这可以帮助遇到此问题的其他人。该元素实际上工作得很好。
因此，我正在尝试制作一个响应式图像组件，该组件将根据屏幕 resolution/pixel 密度加载适当大小的图像。据我了解， 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。
我尝试了多种尺寸属性。如果我将尺寸设置为 500 像素，它会将图像显示为 500 像素宽，但仍会加载 2 倍图像。
为什么会这样？我做错了吗？当图像宽度为 300 像素并且不需要高分辨率版本时，如何让它加载 0.5 像素？
好的，所以我明白了。事实证明这是 chrome 开发工具的错误。当我更改大小 属性 时，它不会更新元素的行为，直到我退出响应模式并再次进入它，重新加载和清除缓存不起作用，只能退出并进入响应模式。希望这可以帮助遇到此问题的其他人。该元素实际上工作得很好。