css - 始终按比例调整背景图像的大小以使用中心点进行缩放

Question

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

似乎背景图像有一个中心点，当图像无法保持其比例比例时，图像开始裁剪。

这是一个例子：

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

现在我的背景有以下CSS：

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

问题是它是固定的，我希望它在图像无法缩放时进行裁剪。

Answer 1

您正在寻找这种组合：

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

工作样本小提琴在这里。

请注意，IE8 不支持此功能，如果您需要支持 IE8 或更早版本，则需要 JS hackery。