background-size设置背景图片大小:
- 背景图大小设置(background-size)必须写在背景图引入的下
- 百分比相对于容器的宽和高 (充满容器 很可能图片变形)
div {
width: 400px;
height: 400px;
border: 1px solid #000;
background: url("./img/jiufen.jpg") 0 0 no-repeat;
background-size: 100% 100%;
}
- background-size: cover 图片等比缩放,当宽高的其中一个刚好充满容器,另一个充满或超出容器 (图片有可能超出容器 但是图片一定充满整个容器)
div {
width: 400px;
height: 400px;
border: 1px solid #000;
background: url("./img/jiufen.jpg") 0 0 no-repeat;
background-size: cover;
}
4. background-size: contain 图片比例不变,等比缩放。当任意宽高其中一个充满容器 即停止 (图片全部显示,但是可能充不满整个容器)
div {
width: 400px;
height: 400px;
border: 1px solid #000;
background: url("./img/jiufen.jpg") 0 0 no-repeat;
background-size: contain;
}