居中一個固定的div，div與圖像大小相同

所以我想在屏幕中心放置一個固定的div。這個div也應該是一個子div的容器。另外我希望它顯示一個圖像（作爲背景）。這是圖像的代碼：居中一個固定的div，div與圖像大小相同

.centerdiv > img{ 
height: 100%; 
width: auto; 
}

我想保持這種方式，讓瀏覽器總是顯示一個完整的圖像。目前我試着與這個HTML代碼：

<div class="centerdiv "><img src="bgstatic.png"> 
     </div>

我也試圖與CSS（在CSS代碼中添加圖像）做到這一點。我不介意這部分真的很多。基本的想法是有一個居中的圖像和固定位置的菜單（所以他們不滾動），頁面的其餘部分應該在它的頂部，應該能夠滾動。

我嘗試過利潤率：自動，左/右0/50％等等......我確實得到了我幾乎想要的結果。但問題是，我的容器div更大，然後固定背景div，因此我很難用其定位頁面的其餘部分...

來源

2013-07-05 klo

<div style="text-align:center;"> 
    <div class="centerdiv "><img src="bgstatic.png"></div> 
</div>

的CSS

.centerdiv{ 
       height: 100%; 
       width: auto; 
       display:inline-block; 
       position:fixed;}

來源

2013-07-05 18:56:50

其中心，但不是固定的... – klo

我認爲你想要這 –

是的。多數民衆贊成great.ty – klo

只是要清楚。
你正在尋找一個靜態的，居中的背景圖片？

如果是這樣的話，它可以在你的CSS中完成。

body { 
    background-image: url('bgstatic.png'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-attachment: fixed; 
}

這會靜態地將背景圖像居中。

這裏的一個的jsfiddle例如：http://jsfiddle.net/TGpWe/

來源

2013-07-05 18:56:47 Duncan

肯定的。但它應該保留原始圖片的長寬比... – klo

編輯我的帖子。這應該工作。 – Duncan

sry，但那不工作，因爲我想:)。事情是，我需要它整個頁面的固定。在這種情況下，圖像只爲該div固定（所以如果div被移動，圖像消失）。第二，我需要以後需要在該圖像上放置文本，所以我需要固定div與圖像的大小相同... – klo

要保留原始長寬比：

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

實施例：http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

來源

2013-07-05 19:35:45

sry，但那不工作，因爲我想:)。事情是，我需要它整個頁面的固定。在這種情況下，圖像只爲該div固定（所以如果div被移動，圖像消失）。第二，我需要以後需要在該圖像上放置文本，所以我需要固定div與圖像的大小相同。 – klo

居中一個固定的div，div與圖像大小相同

回答

相關問題