得到縮放div保持在相同的位置

我正在使用CSS的可縮放背景圖像。我正在使用帶嵌套AP div的div標籤容器，其中包含一個動畫Flash徽標，我希望將其與背景圖像一起縮小。得到縮放div保持在相同的位置

我有我一直在研究了一整天的兩個問題和我不能似乎解決：

當我縮小瀏覽器來測試圖像時，AP DIV移動位置和不不要停留在應有的位置上。它根據瀏覽器向上或向下移動一點。
我無法在Internet Explorer中使用它。

我已閱讀儘可能多的Q/A，並參觀了很多論壇，並在我的智慧結束。任何幫助將不勝感激。謝謝！！！！！

網站測試可以在www.casadeoracionvida.org上查看我想要的行爲是徽標總是在白點（雲）上，不管是否縮放，以及在任何瀏覽器中。

這是我的全部代碼：

<head> 




.imgwrapper { 
height: 100%; 
width: 100%;

}

body { 
margin-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px; 
background-image: url(img/bluesky.jpg); 
background-repeat: no-repeat; 
-moz-background-size: cover; 
-webkit-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

}

#logo { 
position: absolute; 
width: 23%; 
height: 47%; 
z-index: 1; 
left: 40%; 
top: 40%;

}

</head> 

<body> 

<div class="imgwrapper"> <div id="logo"> 
<object id="FlashID" width="100%" height="100%"> 
<param name="movie" value="logo1.swf" /> </div> </div> 

</body> 
</html>

來源

2013-05-18 Sara

薩拉嗨，你有一個小提琴給我們展示（+ HTML碼）？ –

因爲我相信它是由Dreamweaver生成的，所以很難修復代碼而不幾乎完全重寫它。

這是我對此採取：

<style> 
body 
{ 
    margin:0px; 
    background: url(img/bluesky.jpg) no-repeat center top; 
    background-size:100%; 
    background-size:cover; 
} 
#globalWrap 
{ 
    display: table; 
    width:100%; 
    height:100%; 
} 
#logoWrap 
{ 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 
#logo 
{ 
    width:23%; 
    display:inline-block; 
} 
</style> 

<body> 
<div id="globalWrap"> 
<div id="logoWrap"> 
<div id="logo"> 
<object id="FlashID" width="100%" height="100%"> 
<param name="movie" value="logo1.swf" /> 
</object> 
</div> 
</div> 
</div> 
</body>

注：

這是一個黑客位，但它被稱爲兩個中心元素的最可靠的途徑之一水平和垂直
我添加了一個background-size:100%; - 這使得在舊瀏覽器中的背景延伸cover不可用
我把display:table在身上，以避免增加兩個包裝div但我有點警惕改變人體的顯示類型

來源

2013-05-18 19:37:30 Orteil

得到縮放div保持在相同的位置

回答

相關問題