很抱歉回复晚了,但我也需要帮助。答案中的两个代码片段“有点”起作用,但它们看起来真的很糟糕!
在我看来,下面的代码效果要好得多:
.lb-image, .lb-dataContainer {
max-width: 100%;
height: auto !important;
width: 100%;
}
.lb-outerContainer {
max-width: 100%;
height: auto !important;
}
感谢指引...我使用了之前的建议作为起点,然后进行了一些尝试。
我正在处理一个已安装 LightBox2 v2.0 的网站,而不是新安装(需要重新编码图像等),我决定只进行一些调整...
我的 CSS 如下。现在已经完全响应式。
主要点是更改宽度、最大宽度、高度和最大高度以及 !important。我发现一旦我让宽度响应视口,#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; }
您只需要在图像上设置max-width:100%
(使用CSS)。这就是使图像响应的所有要求。如果lightbox2在图像上设置样式,请查看选择器特异性并覆盖它。
.lb-image, .lb-dataContainer, .lb-outerContainer {
max-width: 100%;
height: auto !important;
width: auto !important;
}
对我来说,像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,请使用上面帖子中编写的代码。
我尝试了这个页面上的每一个建议,但都没有起作用。所以几个小时后,我根据捕获窗口调整大小事件编写了自己的解决方案。
这是我的解决方案,它可能看起来需要很多努力,但当窗口调整大小时,它可以完美地缩放图像(这主要基于JavaScript):
在lightbox.js中执行以下操作:
创建两个全局变量:
var preloader_Height;
var preloader_Width;
preloader_Height = preloader.height;
preloader_Width = preloader.width;
然后在脚本底部(就在返回语句之前):
//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 函数中。
现在,您应该能够实时按需缩放窗口,您的图像也会相应地缩放。