调整初始 div 负载以适应浏览器缩放？答案

【问题标题】：Resizing initial div load to fit to browser zoom?调整初始 div 负载以适应浏览器缩放？
【发布时间】：2014-01-08 16:16:46
【问题描述】：

所以我目前正在设计一个网站，我注意到的一件事是我为容器放置的 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 的大小以适应屏幕。我主要希望这个过程不自动缩放浏览器，因为我不想弄乱用户在其他网站上的缩放级别。

【问题讨论】：

标签： javascript css html

【解决方案1】：

解释你的目标的段落相当混乱。你能解释一下你想要做得更好的地方吗？

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

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

这将缩放您的 div 及其所有子项，而不会更改其纵横比。

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

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

this link 是一篇关于检测跨浏览器页面缩放的深入 SO 帖子。

【讨论】：