html - 图片 srcset 和同位素网格在单击时更改图像宽度而不是视口(viewport)

Question

希望有人能阐明一些问题 - 我有具有固定列宽的同位素元素，这些元素不是通过视口(viewport)宽度而是通过用户交互来切换的。

固定图片宽度为 105px、160px、333px 和 1200px。

我想使用图片 srcsets 并根据图像宽度而不是视口(viewport)获取要更新的源。目前我发现很难确定是否有办法触发此操作，或者我是否应该通过 javascript 来执行此操作。

我的图片 srcsets 在视口(viewport)方面工作正常，但是当一列只有 105 像素并且该宽度的 5 - 12 列可能适合屏幕时，由于视口(viewport)宽度不是功能，它加载 1200 像素宽的图像我想要但没有提供我希望节省的钱。

我上下搜索过，并没有找到太多可以指引我正确方向的东西。非常感谢任何帮助。

Answer 1

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