将背景图像缩放比例始终与中心点成比例地缩放

Question

我希望能够在调整大小时，复制这个网站图片的行为。

看起来背景图片有一个中心点，在无法保持比例缩放时开始裁剪。

这是一个例子:

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

目前我的背景具有以下CSS:

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

问题是图片尺寸已固定，而我希望它在无法缩放的情况下进行裁剪。

问题是图片尺寸已固定，而我希望它在无法缩放的情况下进行裁剪。

- Sam Bellerose

---

你有任何可以分享的代码吗？你目前为止做了哪些尝试？ - Dryden Long

目前我的背景具有以下CSS：＃bg { 位置：固定; 顶部：0; 左侧：0px; 宽度：100％; }问题是它是固定的，当图像无法缩放时，我希望它能够裁剪。 - Sam Bellerose

这可能是你正在寻找的：http://css-tricks.com/perfect-full-page-background-image/ - Dryden Long

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。

- Niels Keurentjes

---

这很酷，但如何解决较低宽度时的挤压问题？可能使用高度：100％进行自动缩放？ - bard

我同意这很酷，但在CentOS 6上使用Firefox 44时，如果调整使用大图片的区域窗口大小，Xorg的CPU使用率会永久上升接近100％。你需要重新启动Firefox才能将其恢复正常。开发人员可能建议关注此错误。 - Adam Leggett

图片高度较低时无法按比例缩放。有什么解决方法吗？ - fatCop

@fatCop 不可能的，background-size:cover 严格定义为保持宽高比。 - Niels Keurentjes

这与“padding”和“background-origin：content-box”结合使用效果很好。 - Danny Beckett