html - 完全贴合背景图片，无需展开

Question

这是一个演示。我想完全适合背景图像而无需拉伸。因为当我调整窗口大小时，图像会失真。如果我用

position: absolute;
width: 100%;
height: 100%;
background: url("http://farm9.staticflickr.com/8100/8601158004_173413335e_k.jpg");
background-repeat:no-repeat;

图像不再拉伸，但图像将非常大。如何正确设置背景图片？我将不胜感激。

Answer 1

您可以为此使用background-size-property ：cover

#homee {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("http://farm9.staticflickr.com/8100/8601158004_173413335e_k.jpg");
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

http://jsfiddle.net/G2Rhq/4/

更新

如果您必须支持 oldIE，请尝试我的超级简单 jquery 插件：

https://github.com/yckart/jquery.fitpic.js