说说background-size:cover;与background-size:contain的区别
程序员文章站
2022-05-24 13:23:43
...
1.background-size:cover
官方background-size:cover;的解释是这个样子的，截图如下所示：
解释：1）是按照图片的比例放大或者缩小至充满容器，而不是按照容器的比例大小来缩放。
2）如果照片的比例和容器的比例是不一致的，必定会导致照片的不完整性。
下面举一个栗子来说明这种情况：
首先原始的背景图片是这样的。
而设置background-size:cover之后（代码如下）
<!DOCTYPE html>
<html>
<head>
<style>
.allen
{
width:400px;
height:300px;
background:url(/i/bg_flower.gif);
background-size:100%;
background-repeat:no-repeat;
padding-top:80px;
border:1px solid red;
}
</style>
</head>
<body>
<p class="allen"></p>
</body>
</html>
效果图是这样的
可以看出按照图片的比例充满容器后，图片丢失了一些地方。
2.background-size:contain;
2.1 background-size:contain;在background-repeat:no-repeat;的情况下
直接看代码和效果图
代码只用修改一行即可（如下所示）
background-size:contain;效果图如下所示：
2.2 background-size:contain;在background-repeat:repeat;的情况下
即代码如下所示：
background-repeat:repeat;
background-size:contain;效果图如图所示：
小结：background-size:contain;必定会出现一张完整的图在容器中，可以分为两种情况考虑
（1）图片比例和容器比例相同：完整的充满整个容器；
（2）图片比例和容器比例不同：1）no-repeat; 出现留白
2）repeat; 平铺满整个容器，多余的部分裁剪掉即可
本博客由博主原创，如需转载需说明出处！谢谢支持！
上一篇： vue.js组件之间的父子（向下）传值
下一篇： Android屏幕适配最优方案