在浏览器中调整div的宽度和高度用CSS调整大小

Question

我有一个大的div包含图像。我希望该图像根据浏览器窗口的高度/宽度缩小或扩大。我可以通过使用width: 100%来实现这个水平，但如果我将高度设置为100％，图像div就会完全消失。

我意识到你必须设置BODY和HTML有100％的高度和宽度，我已经做到这一点无济于事。

如果我给它一个硬编码的像素高度，图像显示正常，但是如果浏览器变小，我希望这会缩小。

有人会知道实现这个的正确方法，最好只用CSS？

我的代码是：

HTML, BODY { 
    width: 100%; 
    height: 100%; 
} 

#imagecontainer { 
    width: 100%; 
    height: 100%; 
    background-image: url(image.jpg); 
    background-size: 100% auto; 
    background-position: center; 
} 

Answer 1

也许这样的事情？ http://jsfiddle.net/dangoodspeed/N3MaJ/1/不知道我理解的问题100％，但我认为你可能希望该行

background-size: cover;