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

Question

在bootstrap模板中我正在添加一个像这样的背景图像

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

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

background-size: 100% 100%;

会给你想要的结果。

但我不推荐它。

Answer 5

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