（一）基本语法

基本语法：background-size: length | percentage | cover | contain; （可参照w3c的为准）

length 

该属性值是设置背景图像的宽度和高度的，第一个值是宽度，第二个值是设置高度的。如果只设置第一个值，那么第二个值会自动转换为 “auto”;

percentage 

该属性是以父元素的百分比来设置图片的宽度和高度的，第一个值是宽度，第二个值是高度。如果只设置一个值，那么第二个值会被设置为 “auto”;

cover 

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

contain 

把图像扩展至最大尺寸，以使宽度和高度 完全适应内容区域。

（二）实现原理

1.padding-top 

padding-top = （高度 / 宽度 ）＊ 100% ＝ （1600／ 2560）＊ 100% ＝ 62.5%; 

//根据实际图片的宽度是设置padding-top的值，可运用于懒加载的默认占位图

2.background-size:cover 

background-size:cover，使这个属性让背景铺满

3.background-position: center 

background-position: center，使其居中

4.HTML代码如下

//模型一：自动等响应式缩放，可应用于轮播图等场景
<div class="column">
    <div style="padding-top:62.5%;background: url('loading.jpg') no-repeat;background-size:cover;background-position:center;"></div>
</div>
//模型二：根据父盒子的大小自动等比例平铺，可应用于商品的列表页或详情页等场景 
<div style='width: 400px;height: 200px;' class="column">
    <div style="padding-top:50%;background:url('loading.jpg') no-repeat;background-size:cover;background-position:center;"></div>
</div>