Question

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

我的目标如下：

当屏幕尺寸超过600px或低于300px时，我想提供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" />

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

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和大小不能像我期望的那样工作

1 个答案: