Question

我想设置一个网页背景图片，以便与浏览器窗口一起缩放，这样它就不会失去原有的宽高比（变得拉伸），从而使图像本身基本保持居中。在窗口达到足够小的尺寸后，我希望图像在左侧和右侧都溢出（消失），而不是仅在右侧，因为默认情况下图像是绝对定位的。

以下是我现在正在做的一个例子：http://jsfiddle.net/S59EW/2/

#background img {
  position: absolute;
  min-height:100%;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
}

（图片必须位于一个div内，因为我正在使用的一些javascript适用于它。）

如果您调整jsfiddle窗口的大小，您将看到只有在窗口不太高的情况下，图像才会保持其宽高比。然后垂直拉伸图像。

如果你删除“height：auto”你会得到相同的东西，除了图像在某个点后停止调整大小并消失在右/底侧而不是在顶部/左侧。

#background img {
  position: absolute;
  min-height:100%;
  width: 100%;
  top: 0;
  left: 0;
}

所以，我需要：

背景图像始终占据整个窗口而没有滚动条。图像始终保持纵横比。

。图像在某个浏览器大小阈值之后溢出到左侧和右侧，以便它基本保持居中。

谢谢大家

Answer 1

您可以通过CSS设置div背景，这样图像将填充div，并且当div调整为较小时，两侧将截止。当缩小时，此代码将图像置于div中的边缘和边缘的截止位置：

HTML：

<div id="background"></div>

CSS：

#background {
    position: absolute;
    min-height:100%;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    background: url(http://2.bp.blogspot.com/-ayEwJpMGTPQ/USqliwPWo1I/AAAAAAAAHtI/ab6NHVy0Q48/s1600/tree.jpg) no-repeat center center;
    -webkit-background-size: cover; /* Add in these */
    -moz-background-size: cover;    /* four lines to */
    -o-background-size: cover;      /* remove the white space*/
    background-size: cover;         /* around images */
}

JSFiddle

和full screen JSFiddle

Updated JSFiddle with background-size property included to remove white space

Updated full screen version

Updated with slideshow

Updated fullscreen with slideshow

您可能需要使用背景照片的宽高比才能获得所需的效果。

Answer 2

我有两个选项，一个只有CSS，但需要media queries一个小宽度。

以下是背景图片JSFIDDLE，在此图片中，它将完全按照您的要求进行缩放。

最后，请滚筒滚动，如果你需要将图像作为自己的标签并以这种方式行动，那么就有FIDDLE。：P

首先CSS，

#background img {
  position: absolute;
  min-height:100%;
  width: 100%;
  height: auto;
  margin-top: -40%;
  top: 50%;
  left: 0;
}

@media only screen and (max-width: 1700px) {
  #background img {
    margin-top: 0;
    top: 0;
  }
}

缩放背景图像，使其始终保持纵横比并保持居中

2 个答案: