html平铺 拉伸 图片,[CSS]背景图片中平铺与拉伸

在某业务场景下，需要支持背景图的平铺和拉伸，那么在CSS中的这俩属性表现有何区分关系到是否符合业务表现，因此有必要清晰知道其差别。

原本以为只有自己会遇到，没想到群里有小伙伴也问到了。

0x00 background-size

在CSS中有background-size属性，平铺与拉伸可以通过下面两个值实现：

平铺：cover

拉伸：100% 100%

0x01 表现如何

设置的背景图原图比例表现如下：

比较的代码实现如下：

背景图长宽比例问题探索

*{

margin: 0;

padding: 0;

border: 0;

}

.box {

width: 400px;

height: 300px;

background-color: aquamarine;

background-image: url(http://p0.qhimg.com/bdr/__85/t01cf4d52137a580601.jpg);

background-size: cover;

background-position: center;

}

.box2 {

width: 400px;

height: 300p