图片 srcset 和同位素网格在单击时更改图像宽度而不是视口
Picture srcset and isotope grids that change image width on click not viewport
希望有人能解释一下 - 我有固定列宽的同位素项目，这些项目不是通过视口宽度而是通过用户交互来切换的。
固定图片宽度为 105px、160px、333px 和 1200px。
我想使用图片 srcsets 并让源根据图像宽度而不是视口进行更新。目前我发现很难确定是否有办法触发此操作，或者我是否应该通过 javascript 来执行此操作。
我的图片 srcsets 在视口方面工作正常，但是当一列只有 105 像素并且该宽度的 5 - 12 列可能适合屏幕时，由于视口宽度不是，它加载 1200 像素宽的图像我想要但未提供的功能以及我希望节省的费用。
我上下搜索过，但找不到太多可以指引我正确方向的信息。非常感谢任何帮助。
Srcset 和图片元素仅适用于基于分辨率的媒体查询，或简单的 1x、2x 等描述符。您无法根据容器宽度控制加载哪个 src。您必须在此处使用 JavaScript 或其他一些 CSS class/method.
如 W3C Documentation 中关于响应式图像，特别是 srcset 中所述，所有注意事项均以与仅基于视口宽度的媒体查询类似的方式完成。
希望有人能解释一下 - 我有固定列宽的同位素项目，这些项目不是通过视口宽度而是通过用户交互来切换的。
固定图片宽度为 105px、160px、333px 和 1200px。
我想使用图片 srcsets 并让源根据图像宽度而不是视口进行更新。目前我发现很难确定是否有办法触发此操作，或者我是否应该通过 javascript 来执行此操作。
我的图片 srcsets 在视口方面工作正常，但是当一列只有 105 像素并且该宽度的 5 - 12 列可能适合屏幕时，由于视口宽度不是，它加载 1200 像素宽的图像我想要但未提供的功能以及我希望节省的费用。
我上下搜索过，但找不到太多可以指引我正确方向的信息。非常感谢任何帮助。
Srcset 和图片元素仅适用于基于分辨率的媒体查询，或简单的 1x、2x 等描述符。您无法根据容器宽度控制加载哪个 src。您必须在此处使用 JavaScript 或其他一些 CSS class/method.
如 W3C Documentation 中关于响应式图像，特别是 srcset 中所述，所有注意事项均以与仅基于视口宽度的媒体查询类似的方式完成。