img srcset 和大小无法正常工作

Question

我目前正在尝试在我的网站上制作响应更好的图片。经过一些研究，我发现了 srcset 和 sizes 属性。

我的目标如下：

当屏幕尺寸大于 600 像素或小于 300 像素时，我想提供 250x250 的图像
当它介于这两个值之间时，我想提供一个 350x350 的图像
此外，我还希望为具有更高像素比的屏幕提供更高分辨率的图像

这是我想到的。但它并没有像我想象的那样工作。始终投放小型 250x250。

<img src="https://placehold.it/250"
  srcset="https://placehold.it/700 700w, https://placehold.it/500 500w, https://placehold.it/350 350w, https://placehold.it/250 250w"
   sizes="((max-width: 600px) and (min-width: 300px) and (min-resolution: 2)) 350px, (min-resolution: 2) 250px, ((max-width: 600px) and (min-width: 300px)) 350px, 250px" />

我还有一个问题：
在我的测试中，我发现当 window 调整大小时浏览器不会加载新图像，因此应该提供不同的图像。可以吗？

Answer 1

好的。经过一些繁琐的研究，我发现我没有正确理解 sizes 属性。

以下是我如何实现我想要的：

<img src="https://placehold.it/250"
  srcset="https://placehold.it/700 700w, https://placehold.it/500 500w, https://placehold.it/350 350w, https://placehold.it/250 250w"
   sizes="(max-width: 600px) calc(100vw - 50px), 250px" />

img srcset 和大小无法正常工作

img srcset and sizes not working as I would expect

html

css

image

responsive-design

srcset