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

时间:2013-03-16 04:30:06

标签: javascript jquery height background-image

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


    });
});

1 个答案:

答案 0 :(得分:0)

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

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

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

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