img srcset 和尺寸没有像我预期的那样工作答案

【问题标题】：img srcset and sizes not working as I would expectimg srcset 和尺寸没有像我预期的那样工作
【发布时间】：2023-03-14 13:54:01
【问题描述】：

我目前正在尝试在我的网站上制作更好的响应式图片。经过一番研究，我发现了 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" />

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

【问题讨论】：

哪个浏览器？一些主流浏览器don't support or don't fully 支持这个。
我在 Firefox 和 Safari iOS 上测试过。
根据上面的链接："iOS Safari (8.4) 支持分辨率切换的语法子集（使用 x 描述符），但不支持可以与大小一起使用的完整语法（使用 w 描述符）”。现在我不是这个功能的专家（到目前为止还不是），但也许它是相关的。
但还是这样。 Firefox (39) 应该支持这一点。 iOS Safari 不完全支持它，我并不感到惊讶。
确实如此。那我就不知道答案了。

标签： html css image responsive-design srcset

【解决方案1】：

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

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

<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" />

【讨论】：