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
试试这个
background-size: contain;
Try your code to this.
background:url(../images/banner.png);
background-repeat: no-repeat;
background-size: 100%;
And add this.
html{
height: 100%;
}
div { height: 100px; width: 100px; background: url(http://i.ytimg.com/vi/v1SabYdIlZI/maxresdefault.jpg) no-repeat; background-size: 100%; }
<div></div>
background-size: 100% 100%;
will give you the result you wanted.
But I don't recommend it.
background : url (../images/banner.png) no-repeat; background-size:contain;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.