Question

我正在寻找一种简单的方法来设置Lightbox容器和图像的最大宽度和高度，如果图像大于当前窗口大小，则根据窗口大小设置。

所以说图像是2000x1200，窗口是1280x1024，那么max-height的{{1}}和max-width以及div.lb-outerContainer应该设置为

img.lb-image

和

$(window).height() - 286, $(window).width() - 60

分别

我在确定实施这些规则的方法时遇到了一些麻烦。我是否在$(window).height() - 306, $(window).width() - 80文件中执行此操作？如果是的话，在哪里？是否可以在其使用的页面上添加一些脚本？

Answer 1

这个答案不适用于灯箱，这只是.image vs window

的一般缩放

var $window = $(window),
    $image = $(".image");

$image.load(function() {
    var windowHeight = $window.height(),
        windowWidth = $window.width(),
        imageHeight = $image.height(),
        imageWidth = $image.width(),

        radioHeight = windowHeight/imageHeight,
        radioWidth;

        if ( radioHeight < 1 ) {
            imageHeight *= radioHeight;
            imageWidth *= radioHeight;
        }
        radioWidth = windowWidth/imageWidth;
        if ( radioWidth < 1 ) {
            imageHeight *= radioWidth;
            imageWidth *= radioWidth;
        }

    $image.height( imageHeight );
    $image.width( imageWidth );
});

并演示：http://jsbin.com/upisen/1/edit

Answer 2

这不会保持图像比例。你必须使用这样的东西：

$(function(){
$('SELECTOR FOR YOUR IMAGE').load(function() {
    this.removeAttribute( "height" );
    this.removeAttribute( "width" );
    this.style.height = this.style.width = "";
    $(this).data('w',this.width);
    $(this).data('h',this.height);
    ResizeGallery();
});
// on resize window 
$(window).resize(function() {
   ResizeGallery();
});
});


function ResizeGallery() {
    var img=$('SELECTOR FOR YOUR IMAGE');
    // remove attribute to get true size
    img.removeAttr( "height" );
    img.removeAttr( "width" );
    var w = img.data('w');
    var h = img.data('h'); 
    // compute maximum dimention
    var maxW = $(window).width()-300; //300= margin
    var maxH = $(window).height()-200;
    // compute zoom ratio and keep only the smallest
    // also ratio must not exceed 1
    var ratio=Math.max(1,Math.min(maxW/w, maxH/h));
    // compute new dimentions
    var newW = Math.floor(ratio*w);
    var newH = Math.floor(ratio*h);

    // apply to image
    img.css('height',newW ).css('width',newH );
}

假设你正在使用jquery

如果图像较大，请在窗口中安装Lightbox容器

2 个答案: