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加载它async，并且我在父div上使用position absolute来确保它不在页面流中。最后，我的内容位于其上方，z-index高于1。

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

当壁纸大于浏览器窗口时，意味着它应从左侧和右侧进行裁剪。

希望这一切都有意义，否则请问： - ）

Answer 1

我不确定你想做什么是可能的，就像你做的那样。

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

例如

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

并在CSS ...

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

在小浏览器中心大壁纸

1 个答案: