如何在Lightbox2中调整图像大小？

Question

我正在使用http://lokeshdhakar.com/projects/lightbox2/。我有图像缩略图，点击它们就会在灯箱中打开 - 显然。

我遇到的问题是，当其中一些图像是1800x1200时，灯箱会覆盖整个网页。

如何编辑以确保图像的最大高度为400px且宽度是否成比例？我不能简单地上传较低尺寸的图像，因为它们是用户上传的图像，因此我需要执行此脚本/服务器端。

谢谢！

Answer 1

您可以在图片和灯箱上使用max-width和max-height CSS属性：

演示：http://jsfiddle.net/rdfAV/1/

CSS：

img {
    max-width: 400px;
    max-height: 400px;
}

.lb-outerContainer, .lb-dataContainer {
    max-width: 420px;
    width: auto!important;
    height: auto!important;
}​

此方法似乎与所有主流浏览器兼容，此处提供了完整的兼容性列表：http://caniuse.com/#feat=minmaxwh

Answer 2

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

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

Answer 3

非常感谢..真正帮助我的登陆页面

一些编辑的代码，明智地播放

img {
max-width: 800px;
max-height: 600px;
}

.lb-outerContainer, .lb-dataContainer {
max-width: 800px;
width: auto!important;
height: auto!important;
}​