javascript jQuery Lightbox Image Size : 限制图片的最大尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20296810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Lightbox Image Size : Limit the max size of Image
提问by Munjal
I have images which are larger than the screen's viewport, when using them with jQuery Lightbox, the images are showing up in the original size, and hence to see the complete image one needs to scroll horizontally and vertically. I have tried using the CSS tweaks available online but they do not seem to be working. I tried the following code.
我有比屏幕视口大的图像，当将它们与 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)
}
So, what I want to do is set a maxWidth and maxHeight to the lightbox view, ideally do not want to change the lightbox.js file as it is being used at multiple other places.
所以，我想要做的是为灯箱视图设置 maxWidth 和 maxHeight，理想情况下不想更改 lightbox.js 文件，因为它在多个其他地方使用。
回答by CRABOLO
try adding width %
尝试添加宽度 %
#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%;
}
回答by kampageddon
If it is the plugin by Lokesh Dhakar for me the css script below has solved the problem.
如果它是 Lokesh Dhakar 的插件，下面的 css 脚本就解决了这个问题。
At end of file lightbox.css you write this
在文件 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;
}
Warning: #lightbox-container-image-box and #lightbox-container-image-data-box must have the same max-width
警告：#lightbox-container-image-box 和 #lightbox-container-image-data-box 必须具有相同的最大宽度
if you want you can set max-width in px.
如果你愿意，你可以在 px 中设置最大宽度。
回答by Joozy
if you have all them images with small size and want to show in large size then test it find these lines in jquery.colorbox.js
如果您拥有所有小尺寸图像并希望以大尺寸显示，请测试它在 jquery.colorbox.js 中找到这些行
photo.style.width = photo.width + 'px'; photo.style.height = photo.height + 'px';
photo.style.width = photo.width + 'px'; photo.style.height = photo.height + 'px';
comment the hight line for image ratio like
评论图像比例的高线，如
//photo.style.height = photo.height + 'px';
//photo.style.height = photo.height + 'px';
and increase image width with ratio hight photo.style.width = photo.width+200 + 'px';
并以比率 hight photo.style.width = photo.width+200 + 'px' 增加图像宽度；
回答by Damien
I know the question was asked a year ago, but since @Sompuperoo answer helped me, it might be usefull to others.
我知道这个问题是在一年前提出的，但由于@Somuperoo 的回答对我有帮助，所以它可能对其他人有用。
Here is what I used (In my case the image was larger than screen size) :
这是我使用的（在我的情况下图像大于屏幕尺寸）：
#lightbox-container-image-box {
max-width: 100%;
height:100% !important;
}
#lightbox-container-image img {
max-width: 100%;
}
回答by Niente0
After spending a lot of time in trying to make lightbox responsive, I had to give up, script is too old and unadequate.
在花了很多时间尝试使灯箱响应之后，我不得不放弃，脚本太旧而且不够用。
Now I'm using Featherlight: https://noelboss.github.io/featherlight/, almost identical to lightbox but fully responsive (and also very easy to use).
现在我正在使用 Featherlight：https://noelboss.github.io/featherlight/，几乎与灯箱相同但完全响应（并且也非常易于使用）。
JSFiddle demo: https://jsfiddle.net/2pznx9vL/
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>
