調整初始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的負載大小以適應瀏覽器縮放？

回答

相關問題