作用:设置背景图片大小
语法:background-size: 宽度 高度
取值:
取值 | 场景 |
---|---|
数字+px | 简单方便,常用 |
百分比 | 相对于当前盒子自身的宽高百分比 |
contain | 包含,将背景图片等比例缩放,直到不会超出盒子的最大范围 |
cover | 覆盖,将背景图片等比例缩放,直到刚好填满整个盒子没有空白 |
原图效果
contain效果
如果图的宽或高与盒子的尺寸相同了,另一个方向会停止缩放,导致盒子可能会有留白
cover效果
保证图片的宽和高与盒子的尺寸完全相同,有可能导致图片显示不全