图片srcset和同位素网格在点击而不是视口时更改图像宽度

Question

希望有人可以解决一些问题 - 我有一些固定列宽的isotoped项目，不是通过视口宽度切换，而是通过用户交互切换。

固定图像宽度为105px，160px，333px和1200px。

我想使用图片srcsets并根据图片宽度而不是视口来获取更新源。目前我发现很难看出是否有办法触发这个或者我应该通过javascript来做这件事。

我的图片srcsets在视口方面工作得很好，但是当一列只有105px并且该宽度的5-12列可能适合屏幕时，由于视口宽度不是功能，它在1200px宽图像中加载我想要而不是提供和我希望的节省。

我上下搜索，并没有太多指点我正确的方向。非常感谢任何帮助。

Answer 1

Srcset和图片元素仅适用于基于分辨率的媒体查询或简单的1x，2x等描述符。您无法根据容器宽度控制加载哪个src。你必须在这里使用JavaScript，或者其他一些CSS类/方法。

Answer 2

如W3C Documentation中关于响应式图像和srcset所述，所有注意事项都以与媒体查询类似的方式完成，而媒体查询仅基于视口宽度。