Javascript 调整初始div加载大小以适应浏览器缩放？

因此，我目前正在设计一个网站，我注意到的一件事是，我为容器放置的div在不同分辨率下观察时，并不完全按照我希望的方式流动。以下是我在CSS中的内容：

#container{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: black;
}
#center{
    background-image:url(http://farm4.staticflickr.com/3768/11633218256_30a04f01c3_o.png);
    height:1080px;
    width:1920px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left: -960px;
    margin-top: -540px;
    overflow: hidden
}

这是我的HTML：

<div id="container">
    <div id="center"></div>
</div>

---

我非常希望中心div在初始加载时根据浏览器当前的缩放级别调整大小，并使div的边缘适合该缩放，同时保持div的宽度和高度比例为16:9。如果可能的话，我希望能够将相同的缩放应用于嵌套在div中的所有内容。但是我希望用户能够在缩放时，在不调整div大小以适应屏幕的情况下进行放大和缩小。我最希望这个过程不会自动缩放浏览器，因为我不想弄乱用户在其他网站上的缩放级别。

解释你目标的段落非常混乱。你能解释一下你想做的更好吗

#center{ 
  transform:scale(1.5); 
  transform-origin: center center;

  -webkit-transform:scale(1.5); 
  -webkit-transform-origin: center center;
} 

这将在不改变长宽比的情况下缩放div及其所有子对象

或者你可以在#中心使用实际的标签，而不是背景图像。然后你可以这样做：

#center img{
  width: 100%;
  height: auto;
}

这是一篇关于检测跨浏览器页面缩放的深入文章