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

所以我目前正在设计一个网站，而且我注意到的一个事情是我为容器放置的div在我以不同的分辨率进行观察时并不按照我希望的方式流动。继承人什么我在CSS：调整初始div的负载大小以适应浏览器缩放？

#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大小调整以便在缩放时积极地适应屏幕。我大多希望这个过程没有自动缩放浏览器，因为我不想混淆用户在其他网站上的缩放级别。

来源

2014-01-08 JSArrakis

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

#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张贴检测跨浏览器的页面缩放。

来源

2014-01-08 23:00:04 sweeds

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

回答

相关问题