Question

我需要一些窗口调整大小功能的帮助。我有一个简单的灯箱图片库，但我的图像max-height存在问题。

现在，如果调整浏览器大小，图像max-height不会改变。我希望形象合适的图像高度dinamicly。

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

感谢您的帮助。

这是我的代码：

$（document）.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()但是没有用过它？

用图像库的jquery动态获取窗口高度

1 个答案: