0

我需要一个 div 在特定窗口宽度和特定高度之后获取其动态背景图像的高度。

因此，当 div (.header-block-wrapper) >= 630px 并且窗口宽度 >= 978px 时，div 需要与其背景图像一样高。

我在这里得到的用于检测背景图像高度的代码脚本： How do I get background image size in jQuery?

整个脚本也必须在调整大小时触发，这就是我使用 ($(window).resize...) 的原因。

但它不工作......任何想法？

$(window).load(function() {
        $(function(){
            var innerHeight = $('.header-block-wrapper').height();
            var innerWidth = $('.header-block-wrapper').width();
            var backgroundHeight;

            $(image).load(function () {
                backgroundHeight = image.height;
            });

            image.src = $('.header-block-wrapper').css('background-image').replace(/url\(|\)$/ig, "");


            $(window).resize(function(){
                if( innerHeight >= 630px && innerWidth >= 978px) {
                    $('.header-block-wrapper').css("height",backgroundHeight);
                }else {
                    $('.header-block-wrapper').css("height","auto");
                }


            });
        });
    });

编辑//我修复了它：

好吧，我修复了它，而不是使用背景图像，而是使用 div 中的图像作为背景。此图像具有 100% 宽度、自动高度和绝对值。

获取图像的高度比获取背景图像更容易。

jQuery(window).load(function() {
    jQuery(window).resize(function(){
        var innerHeight = jQuery('.header-block-wrapper').height();
        var innerWidth = jQuery('.header-block-wrapper').width();
        var imageHeight = jQuery('.header-block-image').height();

            if( innerHeight >= 630 && innerWidth >= 978) {
                jQuery('.header-block-wrapper').css("height",imageHeight);
            }else {
                jQuery('.header-block-wrapper').css("height","auto");
            }


    });
});
4

1 回答 1

0

为什么不尝试使用 CSS 来实现这一点。

如果您的最小目标图像尺寸为“宽度 = 800 像素”和“高度 = 600 像素”，则其他图像将从指定的目标尺寸之上递增。做

.header-block-wrapper {
min-width:800px;
min-height:600px;
margin: auto;
}

为它分配您需要的默认高度和宽度，然后当您转储任何更大的东西时，如果您的 CSS 中有高于此默认指定大小的图像，它将扩展以适应。

于 2013-03-16T04:36:23.607 回答