比方说背景图片铺满整个div(不管多大):
<div style="width:320px height:240px background:url(图片url) no-repeat center / 100% 100%"></div>如果想让图片保持原始的长宽比例不变形(多余部分自动裁去):
<div style="width:320px height:240px background:url(图片url) no-repeat center / cover"></div>如果想保持比例的同时又要显示出完整的图片(div会出现留白):
<div style="width:320px height:240px background:url(图片url) no-repeat center / contain"></div>具体使用方法如下:背景图尺寸(数值表示方式):
代码如下:
#background-size{
background-size:200px 100px
}
背景图尺寸(百分比表示方式):
代码如下:
#background-size2{
background-size:30% 60%
}
背景图尺寸(等比扩展图片来填满元素,即cover值):
代码如下:
#background-size3{
background-size:cover
}
背景图尺寸(等比缩小图片来适应元素的尺寸,即contain值):
代码如下:
#background-size4{
background-size:contain
}
背景图尺寸(以图片自身大小来填充元素,即auto值):
代码如下:
#background-size5{
background-size:auto
}