0

divの特定のウィンドウ幅と特定の高さの後に、動的な背景画像の高さを取得するdivが必要です。

したがって、div（.header-block-wrapper）が> = 630pxで、ウィンドウ幅が> = 978pxの場合、divは背景画像と同じ高さである必要があります。

ここで取得した背景画像の高さを検出するためのコードスクリプト： 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");
                }


            });
        });
    });

編集//私はそれを修正しました：

了解しました。background-imageを使用する代わりに、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を使用してみませんか。

最小ターゲット画像サイズが「幅=800px」および「高さ=600px」である場合、他の画像はこの指定されたターゲットサイズより上から増分します。行う

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

必要なデフォルトの高さと幅を割り当てます。CSSでこのデフォルトの指定サイズを超える画像がある場合は、それよりも大きいものをダンプすると、それに合わせて拡張されます。

于 2013-03-16T04:36:23.607 に答える