Question

我需要一个div在特定窗口宽度和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来实现这一目标。

如果您的最小目标图像大小为“width = 800px”和“height = 600px”，那么其他图像将从此指定的目标大小上方增量。做

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

为它指定您需要的默认高度和宽度，然后当您转储任何更大的值时，如果您的CSS中的图像高于此默认指定大小，它将展开以适合。

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

1 个答案: