我看了一下：http://drupal.org/node/1630630但这只适用于Drupal网站。是否有人知道如何调整常规lightbox2库以使其响应并在小型移动屏幕上显示？
通过“响应”我的意思是图片应该根据屏幕大小显示。现在，它总是大小相同，在小屏幕上需要滚动。
答案 0 :(得分：3)
嗯，这太晚了，但我也想到了这个想要的帮助。答案中的两段代码“有点”工作，但它们看起来很糟糕！
这样做效果更好，IMO：
.lb-image, .lb-dataContainer {
max-width: 100%;
height: auto !important;
width: 100%;
}
.lb-outerContainer {
max-width: 100%;
height: auto !important;
}
答案 1 :(得分：1)
您应该只能在图像上设置max-width:100%（使用CSS）。这就是使图像响应所需的全部内容。如果lightbox2在图像上设置样式，只需查看选择器特异性并覆盖它
答案 2 :(得分：1)
我用过：
.lb-image, .lb-dataContainer, .lb-outerContainer {
max-width: 100%;
height: auto !important;
width: auto !important;
}
答案 3 :(得分：1)
感谢指针...以前的一些建议作为起点，之后有一个小提琴。
我正在使用LightBox2 v2.0的现有安装工作，而不是新安装（并且必须重新编码图像等）我决定只是一个小提琴...
我的CSS在下面。它现在已经完全响应了。
要点是改变宽度，最大宽度，高度和最大高度＆amp; ！重要。我发现，一旦我得到宽度响应视口，#outerImagecontainer变得非常长，因此最大高度或固定高度。我也将宽度限制在768px，网站的宽度以及图像也是如此，将它们放大显然是有损的。
#lightbox{ position: absolute; max-height:700px; left: 0; width: 100%; z-index: 100; text-
align: center; line-height: 0;}
#lightbox img{ width:100%; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; max-width: 760px; width:80% !
important; max-height:50%; height: auto !important; margin: 0 auto;font-size:11px !important; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 25%; text-align: center;
line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; max-height:50%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA);
/* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/assets/lightbox2/images/prevlabel.gif)
left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/assets/lightbox2/images/nextlabel.gif)
right 15% no-repeat; }
#imageDataContainer{ font: 85% arial, sans-serif; background-color: #fff; margin: 0 auto; line-
height: 1.4em; overflow: auto; max-width: 760px; width: 80% !important; max-height:50px;}
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: auto; background-
color: #000; }
答案 4 :(得分：0)
对我来说，就像NickW所说的那样（感谢你帮助我找到这个解决方案的方式）它只需要一点改变：
@media only screen and (max-width: 680px) {.lb-dataContainer{
max-width: 80%;
height: auto !important;
width: auto !important; }.lb-outerContainer {
max-width: 80%;
height: auto !important;
width: auto !important;}}
灯箱在特定的屏幕尺寸之前没有问题，所以我使用媒体查询来查看图像开始不适合较小屏幕尺寸的部分（在我的情况下它是680px）。当容器没有占用屏幕的所有自由宽度时（它对我来说看起来更好），它最适合我，但它只是一个选择，所以只需检查它是如何工作的。 对于.lb-image，只需使用上面帖子中编写的代码即可。
答案 5 :(得分：0)
我在这个页面上尝试了每一个建议，发现它们都没有用。所以几个小时后我根据抓住窗口调整大小事件编写了自己的。
这是我的解决方案，看起来似乎需要付出很多努力，但是当窗口调整大小时（这主要是基于JavaScript的），它可以很好地扩展图像：
在lightbox.js中执行以下操作：
创建两个全局变量：
var preloader_Height;
var preloader_Width;
在preloader.onload函数中填充它们，如下所示
preloader_Height = preloader.height;
preloader_Width = preloader.width;
然后在脚本的底部（就在return语句之前）：
//Hack is here, modifying scaling when window resize event handler is fired
$( window ).resize(function() {
//Grabbing the padding (if there is any)
containerTopPadding = parseInt($('.lb-container').css('padding-top'), 10);
containerRightPadding = parseInt($('.lb-container').css('padding-right'), 10);
containerBottomPadding = parseInt($('.lb-container').css('padding-bottom'), 10);
containerLeftPadding = parseInt($('.lb-container').css('padding-left'), 10);
//Calculating max image width and height to prevent the image going outside of screen
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
maxImageWidth = windowWidth - containerLeftPadding - containerRightPadding - 20;
maxImageHeight = windowHeight - containerTopPadding - containerBottomPadding - 120;
//Checking for a fitting issue and also defining imageHeight and imageWidth
if ((preloader_Width > maxImageWidth) || (preloader_Height > maxImageHeight)) {
if ((preloader_Width / maxImageWidth) > (preloader_Height / maxImageHeight)) {
imageWidth = maxImageWidth;
imageHeight = parseInt(preloader_Height / (preloader_Width / imageWidth), 10);
} else {
imageHeight = maxImageHeight;
imageWidth = parseInt(preloader_Width / (preloader_Height / imageHeight), 10);
}
}
//Forcing internal image to be 100% so it scales with its external container
$(".lb-image").css("width", "100%");
$(".lb-image").css("height", "100%");
//Forcing the external container to match the new required image width and height
$(".lb-outerContainer").css("width", imageWidth);
$(".lb-outerContainer").css("height", imageHeight);
//Scaling the information at the bottom showing image number and little cross
$(".lb-dataContainer").css("width", imageWidth);
//Defining width for the navigation buttons
$(".lb-nav").css("width", imageWidth);
//Centering vertically
var center_offset = (maxImageHeight - imageHeight) / 2.0;
var top = $(window).scrollTop() + 10 + center_offset;
$(".lightbox").css("top",top);
});
此外，在lightbox.css中添加：
left:50%;
transform: translateX(-50%);
到.lb-nav。
最后，添加
$(".lb-nav").css("width", imageWidth); //Setting image width for the lb-nav
var center_offset = (maxImageHeight - imageHeight) / 2.0;
var top = $(window).scrollTop() + 10 + center_offset;
$(".lightbox").css("top",top);
到lightbox.js中的sizeContainer函数。
现在，您应该能够实时缩放窗口，并且您的图像会相应缩放。