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

Question

我想将网页背景图片设置为随浏览器窗口缩放，这样它就不会失去其原始纵横比(拉伸(stretch))，并且图片本身基本保持居中。在窗口达到足够小的尺寸后，我希望图像在左侧和右侧溢出(消失)，而不仅仅是右侧，如果图像绝对定位，则默认情况下会发生这种情况。

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

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

(图像必须位于绝对定位的 div 内，因为我正在使用适用于它的一些 javascript。)

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

如果您删除“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

您可能需要调整背景照片的宽高比以获得您想要的外观。