Css 如何在不拉伸图像的情况下使图像的宽度达到100%？

我有一个有背景图像的div。我想背景图像始终是100%在屏幕上，无论屏幕大小是什么。我希望图像按比例增长，但裁剪高度。我不希望图像被拉伸。到目前为止，我得到的是：

#banner {
background:url(../images/blurry.jpg) no-repeat;
width:100%; 
height:520px;
background-size:100% 100%;

}

目前，这是拉伸图像到100%，使图像看起来拉伸

---

有人能帮我做这件事吗，或者给我指出正确的方向吗

使用CSS3

背景大小属性。将其设置为
cover
。像这样：

背景尺寸：封面

请注意，只有IE9及更高版本支持此属性值。IE8将抱怨不支持的值。Chrome和Firefox至少在过去几年中支持了
封面
。
谢谢！如果我在IE8中使用它会发生什么？IE8将返回到上一个有效的
背景大小
属性。如果您保持
背景大小：100%100%
property（在
cover
one上方的一行），然后IE8将返回到该属性。这意味着图像将保持拉伸状态，就像到目前为止一样。非常感谢。对别忘了给我的答案投赞成票，并将其标记为选中！