在小浏览器中居中放置大墙纸

Question

我在我的网站上有一个非常大的壁纸(1920x1080全高清)，如果浏览器窗口比图像小，我希望它位于屏幕的中间，而不是左侧。

我当前的标记如下所示：

<div id="wallpaper">
  <img />
</div>

样式是：

div#wallpaper
{
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 1;
}

div#wallpaper img
{
  display: block;
  margin: 0px auto;
}

我使用img标记，因为我通过jquery异步加载它，并且我在父div上使用位置绝对，以确保它不在页面流中。最后，我的内容被放置在它的顶部，z-index高于1。

上面的问题是，当你的浏览器只有1024x768的时候，你只会看到图像的左侧--我希望它是中间的部分。

这意味着当墙纸比浏览器窗口大时，它应该从左右两边进行裁剪。

希望所有这些都是有意义的，否则请询问:-)

Answer 1

我不确定你想做的事情是不是可能的，就像你现在做的那样。

我要做的是将图像设置为墙纸div的背景图像，然后设置背景位置以使图像居中。

例如：

<div id="wallpaper" style="background-image: foo.jpg"></div>

在CSS中...

div#wallpaper
{
    background-position: top 50%;
}