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

Question

所以我有一个带有背景图像的 div。无论屏幕尺寸如何，我都希望背景图像始终在屏幕上显示为 100%。我希望图像按比例增长但裁剪高度。我不希望图像拉伸。到目前为止，我所拥有的是：

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

}

目前这是将图像拉伸到 100% 并使图像看起来被拉伸。

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

Answer 1

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

background-size: cover;

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