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

How to scale a background image without losing proportions

本文关键字：情况下 缩放 背景 图像      更新时间：2023-09-26

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

例如，您可以在LaunchRock的页面和他们的主页上看到这一点的出色实现。

我在StackOverflow上看到了这个问题，但是如果你玩弄它产生的东西，你会看到背景图像是100%的高度和100%的宽度，这意味着照片的原始比例没有保持并且图像被拉伸。

请注意，在 LaunchRock 示例中，如果调整浏览器窗口的大小，图像将按比例增长，并且始终填充整个窗口（无论它们使用什么大小的窗口或背景图像）。

如果浏览器窗口不够宽，它会裁剪背景图像的两侧

（保持图像居中并裁剪左右两侧），如果窗口不够高，它会裁剪背景图像的底部。

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

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

谢谢

它只用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 属性

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

示例：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; }​
您

花费的 LaunchRock 页面（您作为示例）使用 CCS3 属性：background-size 。这是发挥规模"魔力"的属性。

关于 background-size ： http://www.css3.info/preview/background-size/

的更多信息
  • 不要忘记查看此属性的浏览器支持。

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

相关文章：