响应式图像灯箱

Question

我正在尝试创建一个响应式相册。我已经解决了响应式缩略图（它们根据屏幕尺寸和设备像素比加载正确的图像）。但我也想要一个适合他们的响应式灯箱。希望一定有合适的图书馆...

主要问题是如何仅加载正确的图像尺寸。例如，在我的480*320手机上，加载2Mpx的图像是没有意义的。不过在17寸的屏幕上，基本上就是我想要的了。

我希望这很简单，但我还没有找到合适的灯箱库。好吧，对 HTML 进行灯箱处理是一种解决方案，但似乎很少受支持。放大镜弹出窗口支持它，但它似乎针对一些不同的目的，我无法使其适用于图库。

Answer 1

唯一剩下的就是调整

sizes

属性，如果您已经使用

srcset

单元准备好了

w

。这已经描述了浏览器可以使用哪些尺寸。

请记住，

sizes

属性告诉浏览器图像在宽度方面占据了多少视口。

因此，当“单击”图像时，您可以创建整个元素的克隆，然后只需将

sizes

设置为

100vw

即可显示宽高比匹配或非常接近图像（横向/纵向）的显示.
如果方向不匹配，您必须做一些数学运算才能找到更合适的因子。

浏览器将简单地从

srcset

属性中选择正确的图像。完成。