调整背景图像的大小始终与按中心点的比例成比例

时间:2013-08-19 22:15:55

标签: css css3 background-image

我希望能够在调整大小时重现此网站图像的行为。

看起来背景图像有一个中心点,当图像无法保持其比例尺时,图像就会开始裁剪。

以下是一个例子:

http://themes.evgenyfireform.com/wp-jad/

现在我的背景有以下css:

#bg {
    position: fixed;
    top: 0;
    left: 0px;
    width:100%;
}

问题在于它是固定的,我想在图像无法缩放时进行裁剪。

1 个答案:

答案 0 :(得分:35)

您正在寻找这种组合:

background-position:50% 50%;  /* Sets reference point to scale from */
background-size:cover;        /* Sets background image to cover entire element */

Working sample fiddle here

请注意,这是not supported by IE8,如果您需要支持IE8或更早版本,则需要JS hackery。