javascript - 灯箱图像最大高度 = 用户屏幕高度

Question

我正在为摄影师建立一个图片库。您可以在此处找到该网站。
我要做的是设置图像的高度，使其永远不会从屏幕上掉下来。换句话说：

lightbox img { max-height:100%; max-width:auto; } 

然而，这不起作用。因为我ul父母的身高比屏幕大。

这些图像都在 1000 像素左右或更高。当然，我们不想让他们从屏幕上掉下来。有谁知道我如何解决这个问题？

提前致谢！

Answer 1

使用纯 CSS，您可以使用媒体查询，例如：（注意 -> CSS3！）

@media screen and (max-height:700px) {
    #lightbox img { max-height: 690px; }
}

使用 jquery，它更加动态甚至更简单：

$('#lightbox img').css('max-height', $(document).height()));