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

时间:2013-11-13 03:28:58

标签: html css background resize scaling

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

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

所以,我需要:

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

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

谢谢大家

2 个答案:

答案 0 :(得分: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

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

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

答案 1 :(得分: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;
  }
}