jquery - 调整 Lightbox 2 图像的大小

Question

所以我需要灯箱 2 有一个最大的图像宽度来调整太大的图像。

为此，我已将 lightbox.css 文件调整为以下内容

#lightbox img {
  max-height:700px;
  max-width:700px;
}

这适用于调整图像本身的大小，但是白色的灯箱覆盖仍然是原始图像文件的完整大小，因此图像只是在灯箱的中间丢失了。有任何想法吗？我感谢您的帮助 ：-）

Answer 1

1) 打开 slimbox2.js

2）重写这个：

    w(h).css({ backgroundImage: "url(" + o + ")", visibility: "hidden", display: "" });
    w(q).width(l.width);
    w([q, I, d]).height(l.height);

到：

if (l.width > $(document).width() - 100) {
        l.height = l.height * ($(document).width() - 100) / l.width;
        l.width = $(document).width() - 100;
    }
    w(h).css({ backgroundImage: "url(" + o + ")", backgroundSize: "" + l.width + "px " +     l.height + "px", visibility: "hidden", display: "" });
    w(q).width(l.width);
    w([q, I, d]).height(l.height);

最大宽度是

$(document).width() - 100

Answer 2

设置这个：

.lb-outerContainer {
    max-width: 720px; 
    max-height: 720px;
}
.lb-dataContainer {
    max-width: 220px; /* For the text below image */
}

Answer 3

我发现选择的答案意味着图像在大尺寸时不会在容器上缩放和溢出。我发现这个解决方案在所有情况下都适用于我。

.lightbox .lb-image {
  max-width: 712px;
  max-height: 712px;
 }

我将最大宽度和高度添加到这些类中，调整为像素以考虑图像周围的填充。

Answer 4

请尝试将以下内容添加到您的 CSS 中：

.lb-image{
    max-width: inherit;
}