调整 Lightbox 2 图像的大小答案

【问题标题】：Resizing Lightbox 2 images调整 Lightbox 2 图像的大小
【发布时间】：2016-06-15 17:14:57
【问题描述】：

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

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

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

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

【问题讨论】：

标签： jquery css lightbox2

【解决方案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

【讨论】：

【解决方案2】：

设置这个：

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

【讨论】：

当我这样做时，图像比盒子大。图片似乎没有重新缩放

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：