background-size:contain与cover的区别：contain:图片自身的宽高比不变，缩放至整个图片自

不同之处：

1、在no-repeat情况下，如果容器宽高比与图片宽高比不同，

cover:图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被裁掉；cover即为”塞满“

contain:图片自身的宽高比不变，缩放至整个图片自身能完全显示出来，所以容器会有留白区域。contain即为“包含”，我图片虽然缩放了，但是整个图是被“包含”在里面了，完整显示，不能裁剪。

2、在repeat情况下：

cover与上述相同；

contain：容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img-fa {
            /* width: 1600px;
            height: 1100px; */

            height: 500px;
            width: 600px;
            /* background-color: #aabbcc; */
            /* background: url(./img/img.png) no-repeat; */
            /* background: url(./img/abc.png) no-repeat; */
            background: url(./img/abc.png) repeat;
            /* background-size: cover; */
            background-size: contain;
            border: 1px solid olive;
        }
    </style>
</head>

<body>
    <!-- no-repeat: -->
    <!-- cover  无论宽高多大 都会把容器撑满 -->
    <!-- contain  根据他自身长的那一边 先铺满 短的那一边会留白-->
    <div class="img-fa">

    </div>
</body>

</html>