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

Question

in bootstrap template i'm adding an image as background like this

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

problem with these css rules is that images is getting clipped only showing center part of the image which is as per height of the div where its added i want image to be shown to its full height instead of small center part only .

see screenshot for better understanding

Answer 1

试试这个

background-size: contain;

Answer 2

Try your code to this.

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

And add this.

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%;

will give you the result you wanted.

But I don't recommend it.

Answer 5

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