background-size:cover;与background-size:contain的区别

background-size:cover;

1）是按照图片的比例放大或者缩小至充满容器，而不是按照容器的比例大小来缩放。

 2）如果照片的比例和容器的比例是不一致的，必定会导致照片的不完整性。

background-size:contain;

必定会出现一张完整的图在容器中，可以分为两种情况考虑

（1）图片比例和容器比例相同：完整的充满整个容器；

（2）图片比例和容器比例不同： no-repeat; 出现留白  or  repeat; 平铺满整个容器，多余的部分裁剪掉即可

 
原文链接：https://blog.csdn.net/Allenyhy/article/details/82390124