Question

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

Answer 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是关于检测跨浏览器页面缩放的深入的帖子。

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

1 个答案: