javascript – 如何修复jquery灯箱的宽度和高度？

我在我的图片库中使用了jquery lighbox,但是由于图像的大小不同,灯箱尺寸不固定因此打开了图像的原始尺寸,这反过来导致biga图像走出屏幕并显示水平滚动条在浏览器中.

因此,我正在寻找将修复宽度和高度应用于灯箱的方法,以便每个图像必须在灯箱中以此尺寸显示.

请帮忙..

Update

我刚试过Scott(http://geekswithblogs.net/wojan/archive/2009/06/17/jquerylightbox.aspx)给我的解决方案,我这样做了,

function _resize_container_image_box(intImageWidth,intImageHeight) {
// Get current width and height
//rescale if necessary
if((settings.maxWidth != null && settings.maxHeight != null) && (intImageWidth > settings.maxWidth || intImageHeight > settings.maxHeight)){
var isWider = intImageWidth > intImageHeight;//is the image wide or tall?
var scale = isWider ? settings.maxWidth/intImageWidth : settings.maxHeight/intImageHeight;
intImageWidth = intImageWidth * scale;
intImageHeight = intImageHeight * scale;
}

$('#lightbox-image').height(intImageHeight); 
$('#lightbox-image').width(intImageWidth); 
var intCurrentWidth = $('#lightbox-container-image-box').width();
var intCurrentHeight = $('#lightbox-container-image-box').height();
// Get the width and height of the selected image plus the padding
var intWidth = (intImageWidth + (settings.containerBorderSize * 2)); // Plus the image´s width and the left and right padding value
var intHeight = (intImageHeight + (settings.containerBorderSize * 2)); // Plus the image´s height and the left and right padding value
// Diferences
var intDiffW = intCurrentWidth - intWidth;
var intDiffH = intCurrentHeight - intHeight;
// Perfomance the effect
$('#lightbox-container-image-box').animate({ width: intWidth, height: intHeight },settings.containerResizeSpeed,function() { _show_image(); });
if ( ( intDiffW == 0 ) && ( intDiffH == 0 ) ) {
if ( $.browser.msie ) {
___pause(250);
} else {
___pause(100);  
}
} 
$('#lightbox-container-image-data-box').css({ width: intImageWidth });
$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height: intImageHeight + (settings.containerBorderSize * 2) });
};

和

$('#gallery a').lightBox( maxHeight: null,
maxWidth: null);
});

但每当我这样做并点击图片时,只需在浏览器中打开另一个标签,所有灯箱功能都会失败

请帮我纠正一下

谢谢

解决方法:

您需要针对lightbox()的所有调用指定maxHeight和maxWidth.
例：

$('#gallery a').lightBox({
  maxHeight: 700, 
  maxWidth: 700
});

标签：jquery,javascript,css,lightbox
来源： https://codeday.me/bug/20190721/1496959.html