0

希望有人能解释一下——我有固定列宽的同位素项目,这些项目不是通过视口宽度而是通过用户交互来切换的。

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

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

我的图片 srcset 在视口方面工作正常,但是当一列只有 105 像素并且该宽度的 5 - 12 列可能适合屏幕时,由于视口宽度不是我的功能,它在 1200 像素宽的图像中加载想要而不是提供以及我希望的储蓄。

我已经上下搜索了,并找不到太多可以指出我正确方向的东西。非常感谢任何帮助。

4

2 回答 2

1

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

于 2016-02-24T23:40:00.487 回答
0

正如W3C 文档中关于响应式图像的描述srcset,特别是,所有考虑都以与媒体查询类似的方式完成,媒体查询仅基于视口宽度。

于 2016-02-24T23:45:08.547 回答