调整灯箱大小2图像

Question

因此，我需要lightbox 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：

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