javascript - 如何在不丢失比例的情况下缩放背景图像

Question

我想创建一个网页背景图像来填充整个背景，而不扭曲图像和改变它的比例。

您可以在 LaunchRock 的页面和他们的主页上看到一个很好的实现，for example .

我看到了this question on StackOverflow但是，如果您尝试一下生成的结果，您会看到背景图像的高度为 100%，宽度为 100%，这意味着照片的原始比例没有保持，图像被拉伸(stretch)了。

请注意，在 LaunchRock 示例中，如果您调整浏览器窗口的大小，图像会按比例增长并始终填满整个窗口(无论他们使用什么大小的窗口或背景图像)。

如果浏览器窗口不够宽，它会裁剪背景图像的边(保持图像居中并裁剪左侧和右侧)，如果窗口不够高，它会裁剪背景图像的底部。

无论浏览器窗口的大小如何，图像的高宽比都会保持不变，并且整个背景都会被填满。

我想这不能用纯 CSS 来完成，可能需要一些 JavaScript。有什么想法吗？

谢谢

Answer 1

仅使用 CSS 完成，如下所示:

body {    
    background: black url(/images/back.jpg) no-repeat top center fixed;
    -webkit-background-size: cover;
    background-size: cover;
}

使之成为可能的事情:

• CSS 属性 background-size 设置为 cover 及其 vendor 前缀版本
• 使用两侧逐渐变黑的background-image
• 位置设置为顶部中心
• 使用固定属性