jQuery 灯箱 - 是否可以强制调整图像大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2357374/
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
Lightbox - Is it possible to force resize the image?
提问by Probocop
Does anybody know how to force resize the image that opens in lightbox either in CSS or by hacking lightbox?
有谁知道如何强制调整在灯箱中打开的图像的大小，无论是在 CSS 中还是通过破解灯箱？
I know it's not a good solution to having a fixed image size (should be done on upload) but it is a specific requirement of a client.
我知道拥有固定图像大小（应该在上传时完成）不是一个好的解决方案，但这是客户的特定要求。
Thanks.
谢谢。
采纳答案by Steven
It's not a bad solution having fixed size. Just set max-height or max-width (in CSS) to whatever (but not both)- The image will then scale correctly.
固定大小并不是一个糟糕的解决方案。只需将 max-height 或 max-width （在 CSS 中）设置为任何值（但不能同时设置）- 然后图像将正确缩放。
But all images must be same format, otherwise height / width may vary.
但所有图像必须是相同的格式，否则高度/宽度可能会有所不同。
And if you set fixed size in CSS (width, height), then the images will be scewed.
如果您在 CSS 中设置固定大小（宽度、高度），那么图像将被扭曲。
回答by Sujay sreedhar
Add this to css:
将此添加到 css：
#lightbox-container-image img { width:auto; max-height:520px; }
回答by pradeep
<style>
.lb-outerContainer { max-width:690px; max-height:520px; }
.lb-image{ width:500px; max-height:500px;}
</style>
回答by JP Silvashy
In your CSS you can have the image size adjust to fill the maximum width while still maintaining the same aspect ratio like this:
在您的 CSS 中，您可以调整图像大小以填充最大宽度，同时仍保持相同的纵横比，如下所示：
img {width:100%; height:auto}
As long as the container is a block this should adjust the image size. Be aware it may look pixilated in older browsers because the image scaler used in those browsers relies on "nearest neighbor" sampling to scale the images.
只要容器是一个块，就应该调整图像大小。请注意，它在较旧的浏览器中可能看起来像素化，因为这些浏览器中使用的图像缩放器依赖于“最近邻”采样来缩放图像。
回答by Joozy
Find these lines in jquery.colorbox.js
在 jquery.colorbox.js 中找到这些行
photo.style.width = photo.width+200 + 'px';
photo.style.height = photo.height + 'px';
and replace with
并替换为
photo.style.width = photo.width+200 + 'px';
//photo.style.height = photo.height + 'px';
remove image hight and increase image width using +sign.
使用+符号删除图像高度并增加图像宽度。
回答by Alex Weber
Rather than using css, just resize the image using jquery's width()and height()methods on the image element.
而不是使用 css，只需在图像元素上使用 jquery 的width()和height()方法调整图像大小。
Before you do that I'd recommend dividing one by the other to get the ratio, so you don't distort the image! :)
在你这样做之前，我建议将一个除以另一个以获得比率，这样你就不会扭曲图像！:)
回答by Fábio N Lima
I used this code with slimbox2:
我将此代码与 slimbox2 一起使用：
#lbImage {
width:320px;
height:240px;
background-repeat: no-repeat;
background-position:center;
background-size: cover;
-moz-background-size: cover;
}
