javascript - JqueryまたはJavascriptを使用してHTMLでdivの背景画像の寸法を取得する

Question

画像に示されているように、この画像内に背景画像がある[ラッパー] divがあります。別のdivを配置したいのですが、画面サイズが変わると背景画像のサイズが異なるため、2番目のdivの位置を変更する必要があります。

背景画像の幅と高さを取得するためにjqueryを試しましたが、0,0が返されます。

私は何をすべきか。

jsfiddleコードjsfiddle[dot]net / AFvak /

Answer 1

私の知る限り、背景画像に関するそのような情報を照会する機能はありません。私が見た唯一の解決策は、他の手段（imgタグなど）で画像をロードし、それから情報を照会するだけのようです。

参照: jQuery で背景画像のサイズを取得するにはどうすればよいですか?

Answer 2

中央divが常に固定の高さと幅で中央に配置される必要がある場合は、これを試すことができます。

<div class="wrapper">
   <div class="inside"></div>
</div>

スタイル:

.wrapper {
   width: 600px;
   height: 500px;
   margin: 40px auto 0;
   position: relative;
   border: 1px solid black;
   background: url(image_here.jpg) no-repeat center center;
}

.inside {
   top: 50%;
   left: 50%;
   width: 200px;
   height: 100px;
   margin-top: -50px; /* height/2 */
   margin-left: -100px; /* width/2 */
   position: absolute;
   background: #000;
}

デモ

Answer 3

試す ..

$backWidth=$(window).width();
$backHeight=$(window).height();

Answer 4

私の理解によると、ブラウザのサイズが変更されても、タグを固定位置で画像上に配置しようとします。

ここにコード：

<div id="wrapper">
             <div id="test">
                   <img src="test.jpg" id="yourimg">
                   <div id="yourdiv"></div>
             <div>
        </div>





<style>
               #test{
                     position:relative;
               }
               #yourimg{
                     position:absolute;
                     top:100px;
                     left:100px;                  
               }
               #yourdiv{
                     position:absolute;
                     top:120px;
                     left:120px;                  
               }
         </style>