响应式布局限制 Lightbox2 覆盖中的水平显示

Question

我用Lightbox2 on several sites for "galleries", and never had a problem. I am now attempting to use it with a Simple Responsive template (or on Github), 运行成问题：

当叠加层出现并且图像 "zoom" 达到适当的大小时，它们在水平方向上受到限制——就好像浏览器认为它只有一个非常窄的视口。我在 FF 和 Chrome.

中得到相同的结果

如果我在 Chrome 中使用 "Inspect Element" 查看它，#lightbox main DIV 的宽度为 1265px。但是 .lb-outerContainer 和 .lb-dataContainer 都认为可用宽度是 247px。

我已经尽可能仔细地阅读了 CSS 和 JS，但无法找出问题所在。我希望其他一些敏锐的眼睛可以发现问题。

Answer 1

正是简单响应模板中的这一部分导致 "problem"

/* RESPONSIVE IMAGES */
img{ max-width:100%; height:auto;}

您可以通过在响应式模板后添加来移除此限制 css

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

并且由于您希望灯箱具有响应性，所以添加

.lb-outerContainer  {
    max-width: 100%;
}

相反，一切都应该很好！

响应式布局限制 Lightbox2 覆盖中的水平显示

Responsive layout constraining horizontal display in Lightbox2 overlay

css

jquery

lightbox

lightbox2