javascript - 使用 Jquery 或 Javascript 获取 HTML 中 div 的背景图像的尺寸

Question

如图所示，我有一个 [wrapper] div，它在此图像内有背景图像我想放置另一个 div，但随着屏幕尺寸的变化，背景图像具有不同的尺寸，因此第二个 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 标签放在具有固定位置的图像上，即使浏览器也会调整大小。

这里代码：

<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>