欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-24 13:23:43
...

1.background-size:cover

官方background-size:cover;的解释是这个样子的,截图如下所示:

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

解释:1)是按照图片的比例放大或者缩小至充满容器,而不是按照容器的比例大小来缩放。

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

下面举一个栗子来说明这种情况:

首先原始的背景图片是这样的。

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

而设置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>

效果图是这样的

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

可以看出按照图片的比例充满容器后,图片丢失了一些地方。

 

2.background-size:contain;

2.1 background-size:contain;在background-repeat:no-repeat;的情况下

直接看代码和效果图

代码只用修改一行即可(如下所示)

background-size:contain;

效果图如下所示:

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

 

2.2 background-size:contain;在background-repeat:repeat;的情况下

即代码如下所示:

background-repeat:repeat;
background-size:contain;

效果图如图所示:

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

小结:background-size:contain;必定会出现一张完整的图在容器中,可以分为两种情况考虑

(1)图片比例和容器比例相同:完整的充满整个容器;

(2)图片比例和容器比例不同:1)no-repeat;     出现留白

                                                     2)repeat;           平铺满整个容器,多余的部分裁剪掉即可

 

 

本博客由博主原创,如需转载需说明出处!谢谢支持!