jquery - 使用 jquery 动态获取图片库的窗口高度

Question

我需要一些有关窗口调整大小功能的帮助。我有一个简单的灯箱图片库，但我对图像最大高度有疑问。

现在，如果调整浏览器大小，图像最大高度不会改变。我想使图像动态适应图像高度。

我尝试使用窗口调整大小功能，但没有成功。

感谢您的帮助。

这是我的代码:

$(文档).ready(function() {

$('.lightbox_trigger').click(function(e) {

    e.preventDefault();
    var image_href = $(this).attr("href");
    var image_title = $(this).find('img').attr('alt');
    var windowHeight = $(window).height() - 100;

    var lightbox =
        '<div id="lightbox">' +
        '<div id="lightbox-in"><div id="content-lb">' +
        '<img src="' + image_href + '" />' +
        '</div></div>' +
        '</div>';
    $('body').append(lightbox);

    if ($('#lightbox').length > 0) {

        $('#lightbox-in').html('<div id="content-lb"><a class="lb-close"><i class="fa fa-times"></i></a><img src="' + image_href + '" style="max-height:  '+ windowHeight +'px; " /></div><div class="clear"></div><span class="img-item-title">' + image_title + '</span>');

        $('#lightbox').fadeIn();
    } else {

        var lightbox =
            '<div id="lightbox">' +
            '<div id="lightbox-in"><a class="lb-close"><i class="fa fa-times"></i></a>' +
            '<div id="content-lb"><img src="' + image_href + '" style=" max-height:  '+ windowHeight +'px; " />' + 
            '</div></div>' +
            '</div>';
        $('body').append(lightbox);
    }

});

$(document).on('click', '#lightbox', function() {
    $('#lightbox').fadeOut();
    $('#lightbox').remove();
});

});

Answer 1

您可以通过 jQuery 在窗口对象上使用 resize()。

$(window).resize(function() {
  // window has been resized
  var height = $(window).height() - 100;
  $('#content-lb img').css('max-height', height);
});

我知道您说过您已经尝试过 resize() 但什么不起作用？