html{
height:100%;
}
body{
background:url(../image/bg-m.jpg) no-repeat;
background-size: cover;//或者background-size: 100% 100%;
}
background-size contain 与 cover 的区别
在no-repeat情况下,如果容器宽高比与图片宽高比不同
- cover:图片宽高比不变、铺满整个容器的宽高,而图片多出的部分则会被截掉;
- contain:图片自身的宽高比不变,缩放至图片自身能完全显示出来,所以容器会有留白区域;
其实,从英文的意思来说:
- cover意味着“遮罩、遮盖”—此处理解为“塞满”较恰当
- contain意为“包含”–也就是:我图片虽然缩放了,但是整个图是被“包含”在你里面的,你必须把我显示完整、不能裁剪我一丝一毫。
在repeat情况下:
- cover:与上述相同;
- contain:容器内至少有一张完整的图,容器留白区域则平铺背景图,铺不下的再裁掉。