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

Question

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

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

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

(图片必须位于一个div内,因为我正在使用的一些javascript适用于它.)

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

如果你删除"高度:自动"你会得到相同的东西,除了图像停止在某一点后调整大小并消失在右/底侧而不是在顶部/左侧.

#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

和全屏JSFiddle

更新了包含background-size属性的JSFiddle以删除空格

更新了全屏版本

更新了幻灯片

使用幻灯片显示更新了全屏

您可能需要使用背景照片的宽高比才能获得所需的外观.