小编use*_*093的帖子

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

这是我现在正在做的一个例子: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;
}

所以,我需要:

背景图像始终占据整个窗口而没有滚动条.图像始终保持纵横比.在某个浏览器大小阈值之后,图像溢出到左侧和右侧,使其基本保持居中.

感谢大家