当浏览器窗口大小随js&；更改时，如何相应地调整/缩放/重新定位所有div；jQuery？

你好，我目前有一个非常简单的网站。它由一个全帧背景图像和一个容器分区组成。。。背景图像动态居中，并使用css规则放置，如下所示：

html {
    background: url(../images/hotel_room.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这对我来说似乎很好，并保持背景图像以一种“响应”的方式定位，这正是我想要的

我还有一个全宽的容器div，其位置如下：

#mega_wrap{
    position: absolute;
    top:0;
    left: 0;
    height: 100%;
    width:100%;
}

接下来，我有一些简单的jQuery，它使用onClick将div附加到#mega_wrap容器中，onClick基于鼠标单击时的位置。。。像这样：

$(document).ready(function() {

    //onClick append a resizable & draggable div with handles on all 4 corners
    $('#mega_wrap').click(function(e){

        //Define element css and positioning then add both draggable and resizable from jQuery UI
        var ele = $("<div>");
            ele.css({width:"100px", height:"100px", border:"3px dashed white", position:"absolute", left: e.pageX - 50, top: e.pageY -50});
            ele.draggable();
            ele.resizable({
                handles: 'all'
            }); 

        //Define elements handles and append them to the new div
        var eleHandleNE = $("<div class='ui-resizable-handle ui-resizable-ne' id='negrip'>");
        var eleHandleSE = $("<div class='ui-resizable-handle ui-resizable-se' id='segrip'>");
        var eleHandleSW = $("<div class='ui-resizable-handle ui-resizable-sw' id='swgrip'>");
        var eleHandleNW = $("<div class='ui-resizable-handle ui-resizable-nw' id='nwgrip'>");

            eleHandleNE.appendTo(ele);
            eleHandleSE.appendTo(ele);
            eleHandleSW.appendTo(ele);
            eleHandleNW.appendTo(ele);

        //Append new div to the container div called mega_wrap
        $("#mega_wrap").append(ele);

   }); 
});

$（文档）.ready（函数（）{
//onClick附加一个大小可调且可拖动的div，在所有4个角上都有句柄
$（'mega#u wrap'）。单击（函数（e）{
//定义元素css和定位，然后从jQueryUI添加可拖动和可调整大小
变量ele=$（“”）；
元素css（{宽度：“100px”，高度：“100px”，边框：“3px白色虚线”，位置：“绝对”，左：e.pageX-50，顶：e.pageY-50}）；
ele.draggable（）；
可调整大小的({
句柄：“全部”
}); 
//定义元素句柄并将它们附加到新的div
变量eleHandleNE=$（“”）；
变量eleHandleSE=$（“”）；
var eleHandleSW=$（“”）；
变量eleHandleNW=$（“”）；
附录（ele）；
附录（ele）；
eleHandleSW.附录（ele）；
eleHandleNW.附录（ele）；
//将新div追加到名为mega_wrap的容器div中
$（“#mega_wrap”）。追加（ele）；
}); 
});

注意：所有div在所有角落都可以调整大小，并且可以使用jQuery拖动。。。因此，div可能是任何大小和容器内的任何位置。。。。。。。这就是我的问题开始的地方：

我正在寻找一种方法来跟踪所有附加div的位置，可能每个div使用某种变量？！使用javascript或jquery？？然后，如果/当div被调整大小或在容器周围拖动时，我需要能够更新该变量

最后。。。当窗口调整大小时，我需要将div调整到其在背景图像上的精确旧位置。。。所以每个div都会根据窗口大小以锁定的比率进行适当的缩放（向上或向下）

注意：是否认为根据提供的解决方案，我可能必须以不同的方式处理背景图像？接受建议。。。。可能从.css更改为.js或php

---

非常感谢您的帮助。。。。通常，我会在每个div中添加一个属性：

顺便说一句，不要像pendantic那样（特别是因为我建议添加非标准属性标记），但是你的id应该是唯一的。如果是，另一个选择是创建一个对象数组来存储所有初始数据。然后，您可以使用数组和id检索/设置您的值：

//初始div的属性
divArray=新数组（{id:'#id0'，宽度：100，高度：200}，{id:'#id1'，宽度：50，高度：90}）；
...
//稍后添加另一个div
divArray[divArray.length]={id:'#id2'，宽度：300，高度：500}；
//调整大小的东西。。。
函数resizeStuff（divArray，ratio）{
对于（i=0；i
var eleHandleNE = '<div class="ww xx yy" id="zz" iniWidth="100" iniHeight="200">';

$(this).width($(this).attr('iniWidth')*ratio);
$(this).height($(this).attr('iniHeight')*ratio);

//initial div's attrs
divArray = new Array({id:'#id0',width:100,height:200},{id:'#id1',width:50,height:90});
...
//adding another div later
divArray[divArray.length] = {id:'#id2',width:300,height:500};

//Resize stuff...
function resizeStuff(divArray,ratio) {
  for(i=0;i<divArray.length; i++) {
    $(divArray[i].id).width((divArray[i].width*ratio);
    $(divArray[i].id).height((divArray[i].height*ratio);
  }
}