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

Question

所以我有一个带背景图片的div。无论屏幕大小如何，我都希望屏幕上的背景图像始终为100％。我希望图像按比例增长，但是要调高高度。我不希望图像伸展。到目前为止我所拥有的是：

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

}

目前，这是将图像拉伸至100％并使图像看起来拉长。

任何人都可以帮助我，或指出我正确的方向吗？

Answer 1

使用CSS3 background-size属性。将其设置为cover。像这样：

background-size: cover;

请注意，只有IE9及更高版本支持此属性值。 IE8会抱怨价值不受支持。至少从过去几年开始，Chrome和Firefox支持cover。