Question

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

您可以在LaunchRock的页面及其主页for example上看到这方面的一个很好的实现。

我看到this question on StackOverflow但是如果你玩弄产生的东西，你会看到背景图像是100％高度和100％宽度，这意味着照片的原始比例不能保持和图像被拉长了。

请注意，在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及其供应商前缀版本
使用background-image在两侧淡化为黑色
的位置设置为top center
使用fixed属性

Answer 2

如果您不介意使用jQuery，可以尝试http://srobbin.com/jquery-plugins/backstretch/。

Answer 3

示例：http://jsfiddle.net/rPhLa/

你必须设置：

 html,body{ height:100%; width:100%; }

所以他们占据了整个屏幕，然后是背景：

body { background-image: url(http://launchrock.com/images/back.jpg); background-repeat: no-repeat; background-position:center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Answer 4

您使用的LaunchRock页面使用 CCS3 属性：background-size。这是属于规模“魔力”的属性。

有关background-size的更多信息：http://www.css3.info/preview/background-size/

不要忘记看到该属性的浏览器支持。

很可能这可以通过javascript完成，甚至只使用CSS2。对不起，我现在手里还没有一个例子。

如何缩放背景图像而不会丢失比例

4 个答案: