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

Question

我正在使用的是http://lokeshdhakar.com/projects/lightbox2/。我有图片缩略图，点击它们会在lightbox中打开 - 显然。

我的问题是当其中一些图片是1800x1200时， lightbox就会覆盖整个网页。

我该怎么修改以确保图片最大高度为400px，宽度与比例相符？我不能简单地上传更低维度的图像，因为它们是用户上传的图像，所以我需要在脚本/服务器端处理。

谢谢！

- Dave

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

- A.M.K

---

谢谢！我期待着它 :) - Dave

最好使用灯箱，这样我就可以看到需要编辑的元素，但CSS也可以。谢谢！ - Dave

没问题，谢谢！问题在于当我将max-height和max-width设置为.lb-image时，它仍然不尽如人意。非常感谢您的帮助！谢谢 - Dave

@Dave，请查看我的上面的回答，我正在删除之前的评论。 - A.M.K

没问题，不过还有一些需要注意的地方，比如 !important 声明在 w/h 属性上... - A.M.K

Answer 2

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

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

- user2631561

Answer 3

非常感谢..对我的落地页真的很有帮助

一些编辑代码，请明智地操作

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

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

- Shariq Khan