今天项目中提到一个需求，需要把背景图片铺满浏览器全屏，且图片不变形。
也就是说显示的宽高是不确定的，我第一反应就是background-size: 100% 100%;但是这样做有一个弊端。

下面结合代码图具体讨论一下：
首先，设计一个背景颜色为绿色，背景图片为大象的盒子（这里之所以设置背景颜色，是为了突出背景图片）。然后分别叠加background-size属性值。

<style>
    .box{
        height: 250px;
        width: 400px;
        border: 1px solid red;
        background: palegreen url("imgs/elephant.jpeg") 0 0 no-repeat;
    }
    .on-auto{
        background-size: auto;
    }
    .on-percent{
        background-size: 100% 100%;
        /* background-size: 100% auto; */
        /* background-size: auto 100%; */
    }
    .on-cover{
        background-size: cover;
    }
    .on-contain{
        background-size: contain;
    }
</style>

1. 先看一下效果

我用box盒子模拟浏览器窗口，用大象的图片当做背景图片。

由图中可以看到：
background-size: auto;表示图片原始的大小
background-size: 100% 100%; 宽和高都铺满，即将图片分别往宽和高都拉伸了，图片变形
background-size: auto 100%; 按照高度铺满窗口，宽度等比例放大（即：图片在高度上扩大几倍，在宽度上就扩大几倍）
background-size: 100% auto; 按照宽度铺满窗口，高度等比例放大
background-size：cover; 实现的效果和background-size: 100% auto;一样，难道这两行代码含义相同？不急，往下看
background-size: contain; 实现的效果和background-size: auto 100%;一样，难道这两行代码含义相同？不急，往下看

2. 模拟变换浏览器窗口的宽高
浏览器的窗口大小肯定不是固定的，会随着用户拖动发生变化。
我将box盒子原来的宽高属性值height: 250px;width: 400px;变为height: 400px;width: 300px;，看效果

由图中可以看到：
此时，
background-size：cover;和background-size: auto 100%;的实现效果一样；
background-size: contain;和background-size: 100% auto;的实现效果一样。
跟第一次的样式效果正好颠倒过来了，所以可以得出：
background-size：cover;按照 窗口宽/图片宽、窗口高/图片高 中的大的倍数等比例放大图片
background-size: contain;按照 窗口宽/图片宽、窗口高/图片高 中的小的倍数等比例放大图片

想要实现背景图片铺满窗口，且图片不变形：
首先排除：background-size: auto;background-size: 100% 100%;和background-size: contain;
然后排除：background-size: auto 100%; 和background-size: 100% auto;
因为单纯按照某个边放大，可能会出现铺不满的情况
推荐：background-size：cover;