css：使背景图像适合 div 的高度和宽度

Question

在引导模板中，我正在添加一个图像作为背景，就像这样

background:url(../images/banner.png) no-repeat;
background-size: 100%;

这些 css 规则的问题是图像被剪裁仅显示图像的中心部分，这是根据 div 的高度添加的我希望图像显示为其全高度，而不是仅显示小的中心部分。

查看屏幕截图以更好地理解

Answer 1

试试这个

background-size: contain;

Answer 2

试试你的代码。

background:url(../images/banner.png);
background-repeat:  no-repeat;
background-size: 100%;

并添加这个。

html{
height: 100%;
}

Answer 3

 div { height: 100px; width: 100px; background: url(http://i.ytimg.com/vi/v1SabYdIlZI/maxresdefault.jpg) no-repeat; background-size: 100%; }

 <div></div>

Answer 4

background-size: 100% 100%;

会给你你想要的结果。

但我不推荐它。

Answer 5

background : url (../images/banner.png) no-repeat; background-size:contain;