检测 div 高度并将其更改为等于背景图像高度

Question

我需要一个 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");
            }


    });
});

Answer 1

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

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

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

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