0

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

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

所以，我需要：

背景图像始终占据整个窗口而没有滚动条。始终保持纵横比的图像。图片在达到一定的浏览器尺寸阈值后溢出到左右两侧，使其基本保持居中。

感谢大家

4

2 回答 2

5

您可以通过 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 以删除空格

更新全屏版本

更新了幻灯片

用幻灯片更新了全屏

您可能需要调整背景照片的纵横比以获得所需的外观。

于 2013-11-13T04:02:26.403 回答
0

我有这两个选项，一个是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;
  }
}
于 2013-11-13T04:04:18.893 回答