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

 

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

例如，您可以在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; }​
    链接地址: http://www.djcxy.com/p/89167.html

    上一篇: How to scale a background image without losing proportions

    下一篇: 100% width background image with an 'auto' height