1

良い一日を。サイズが に設定された背景画像を持つ div がありcoverます。

javascriptまたはjqueryで背景サイズを取得するにはどうすればよいですか?

つまり、背景は div をその寸法、幅または高さのいずれかで埋めます。表示部分だけでなく、完全な (計算された) 画像の幅と高さを理解したいと思います。

<style>
body {width:100%; height:100%}
#fullCoverBg {background-image:url("ani_bg.jpg"); background-repeat:no-repeat; background-size:cover; background-position:right;}  

@media all and (max-width : 1000px) {
/* small screens */
aside {height:30%; width:100%;}
#fullCoverBg {height:70%; width:100%;}
}

@media all and (min-width : 1001px) {
/* big screens */
aside {height:100%; width:30%;float:left;}
#fullCoverBg {height:100%;width:70%;float:left;}
}  
</style>    

<body>
<aside>this div stay on head on small devices, and go on the left side on big screens </aside>
<div id="fullCoverBg"></div>
</body>

wwindow のサイズを変更すると、背景が div 全体をカバーしていることがわかります。もちろん、「カバー」が div の幅または高さを埋めるため、一部の部分は表示されません...サイズ変更ごとに、これは画像全体の寸法 (見える部分と見えない部分) ?

4

2 に答える 2

3

画像をプリロードする必要があります。

var background = new Image();
background.src = "your-image.jpg";

var bgHeight = background.height;
var bgWidth = background.width;

さて、これが本当の答えです。少し考えて、この回答からコードを借りる必要がありました: JavaScript を介して div の背景画像の URL を確認するにはどうすればよいですか?

でも、やっと手に入れました。jQuery の回答が必要だったようですが、私はネイティブ JS でしか作業していないため、切断について申し訳ありません。

編集: 不足しているロジックがいくつか見つかったので、それを追加しました。これでうまくいくはずです。

http://jsfiddle.net/TLQrL/2/ - 新しいロジックを反映した新しいリンク

var div = document.getElementById("myDiv");
var style = div.currentStyle || window.getComputedStyle(div, false);
var bg = style.backgroundImage.slice(4, -1);

var background = new Image();
background.src = bg;

background.onload = function() {
    if (background.width > background.height) {
        var ratio = background.height / background.width;
        if (div.offsetWidth > div.offsetHeight) {
            var bgW = div.offsetWidth;
            var bgH = Math.round(div.offsetWidth * ratio);
            if (bgH < div.offsetHeight) {
                bgH = div.offsetHeight;
                bgW = Math.round(bgH / ratio);
            }
        } else {
            var bgW = Math.round(div.offsetHeight / ratio);
            var bgH = div.offsetHeight;
        }
    } else {
        var ratio = background.width / background.height;
        if (div.offsetHeight > div.offsetWidth) {
            var bgH = div.offsetHeight;
            var bgW = Math.round(div.offsetHeight * ratio);
            if (bgW > div.offsetWidth) {
                bgW = div.offsetWidth;
                bgH = Math.round(bgW / ratio);
            }
        } else {
            var bgW = Math.round(div.offsetWidth / ratio);
            var bgH = div.offsetWidth;
        }
    }
    console.log(bgW + ", " + bgH);
}
于 2014-05-07T13:00:44.137 に答える