Question

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

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

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

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

Answer 1

设置：

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

Answer 2

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 3

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

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

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

Answer 4

请尝试在CSS中添加以下内容：

 Using $

调整Lightbox 2图像的大小

4 个答案: