场景：平时图片直接上下左右平铺了，今天产品和UI要求图片不能变形，居中显示，记录一下。
实现demo:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.img-bg{width:100px;height:100px;background-image: url('img/test.jpg');background-size:cover;background-repeat: no-repeat;background-position:center center;}</style></head><body><div class="img-bg"></div></body></html>
原图：
实现效果：
注意：background-size 这个属性的两个值：cover和contain
cover: 保持图像的纵横比 , 并将图像缩放成将完全覆盖背景定位区域的最小大小 ,即让图片填充满父节点，超出部分隐藏，仅显示中间
contain: 保持图像的纵横比， 并将图像缩放成将适合背景定位区域的最大大小 ，即 让图片根据父节点宽高等比例缩放。
