5

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

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

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

谢谢！

4

3 回答 3

3

您可以在图像和灯箱上使用max-width和max-heightCSS 属性：

演示：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

于 2012-10-30T02:44:18.207 回答
0

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

 .lb-image{
      max-width: inherit;
  }
于 2016-06-15T06:21:14.683 回答
-1

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

一些编辑的代码，明智地玩

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

.lb-outerContainer, .lb-dataContainer {
max-width: 800px;
width: auto!important;
height: auto!important;
}​
于 2014-10-30T22:04:14.017 回答