Question

我的图像大于屏幕的视口，当与jQuery Lightbox一起使用时，图像以原始大小显示，因此可以看到需要水平和垂直滚动的完整图像。我尝试过使用在线提供的CSS调整，但它们似乎没有用。我尝试了以下代码。

#lightbox-container-image-box {
  max-width:900px ! important; // Or your max-width
}

#lightbox-container-image img {
 max-width:675px ! important; // (your max width - 20)
}

所以，我想要做的是将maxWidth和maxHeight设置为灯箱视图，理想情况下不要更改lightbox.js文件，因为它正在多个其他地方使用。

Answer 1

尝试添加宽度％

#lightbox-container-image-box {
  max-width:900px ! important; // Or your max-width
  width: 100%; //use 100% of even 90% , see what works for you
}

#lightbox-container-image img {
 max-width:675px ! important; // (your max width - 20)
 width: 100%; 
}

Answer 2

如果是Lokesh Dhakar的插件对我来说，下面的css脚本已经解决了这个问题。

在文件lightbox.css的末尾你写这个

#lightbox-container-image-box {
    max-width: 80%;
    height:100% !important;
}
#lightbox-container-image img {
    max-width: 100%; 
}
#lightbox-container-image-data-box{ 
    max-width:80%; margin-bottom:50px;
}

警告：＃lightbox-container-image-box和＃lightbox-container-image-data-box必须相同的最大宽度

如果需要，可以在px中设置max-width。

GitHub project link

Website project link

Answer 3

如果您拥有所有尺寸较小且想要以较大尺寸显示的图像，请进行测试在jquery.colorbox.js中找到这些行

photo.style.width = photo.width +'px'; photo.style.height = photo.height +'px';

评论高线的图像比率喜欢

// photo.style.height = photo.height +'px';

并以高比率增加图像宽度 photo.style.width = photo.width + 200 +'px';

Answer 4

我知道这个问题是在一年前提出来的，但是自从@Sompuperoo的回答对我有所帮助，这对其他人来说可能是有用的。

这是我使用的（在我的情况下，图像大于屏幕尺寸）：

#lightbox-container-image-box {
    max-width: 100%;
    height:100% !important;
}
#lightbox-container-image img {
    max-width: 100%; 
}

Answer 5

花了很多时间尝试让灯箱响应时，我不得不放弃，脚本太旧且不够用。

现在，我使用的是Featherlight：https://noelboss.github.io/featherlight/，与灯箱几乎相同，但响应迅速（而且非常易于使用）。

JSFiddle演示：https://jsfiddle.net/2pznx9vL/

<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<a href="https://hdfreewallpaper.net/wp-content/uploads/2016/10/Norway-Balloon-Beautiful-Scenery-Wallpaper.jpg" data-featherlight="image"><IMG SRC="https://hdfreewallpaper.net/wp-content/uploads/2016/10/Norway-Balloon-Beautiful-Scenery-Wallpaper.jpg" style='width:150px'><br>click on image</a>

jQuery Lightbox图像大小：限制图像的最大大小

5 个答案: