以固定div为中心，div大小与图片相同

Question

所以我想在屏幕中央放置一个固定的div。 这个div也应该是子div的容器。 我也希望它显示图像（作为背景）。 这是图像的代码：

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

我想保持这种方式，以便浏览器始终显示完整图像。 目前，我正在尝试使用此html代码：

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

我确实尝试过使用CSS（在CSS代码中添加图片）来做到这一点。 我不太介意这部分。 基本思想是使图像和菜单居中放置在固定位置（因此它们不会滚动），其余页面应位于其顶部，并且应该能够滚动。

我尝试使用margins：auto，向左/向右0/50％等...我确实得到了我几乎想要的结果。 但是问题是我的容器div大于固定背景div，因此我很难用它来放置页面的其余部分...

Answer 1

只是要清楚。
您要制作静态的居中背景图像吗？

---

如果是这种情况，可以仅在CSS中完成。

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

这将静态地将背景图像居中。

这是一个jsFiddle示例： http : //jsfiddle.net/TGpWe/

Answer 2

<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;}

Answer 3

要保留原始的宽高比：

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