Community Learn Tools Library Leisure
search
English
CSS3中background-size的问题
PHP中文网
PHP中文网 2017-04-17 11:28:15
0
2
534

cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

这里面说的最大大小和最小大小该怎么理解呢？为什么我觉得它们好像没有区别啊？

PHP中文网
PHP中文网

认证高级PHP讲师

reply all(2)
伊谢尔伦
伊谢尔伦2017-04-17 11:30:15 2 floor

Write a piece of code and verify it yourself: 

<!DOCTYPE html>
<html>
<head>
<style> 

p {
width: 200px;
height: 200px;
}
.contain{
border: black 1px solid;
background:url(/i/bg_flower.gif);
background-size:contain;
background-repeat:no-repeat;
padding:10px;
}

.cover{
border: red 1px solid;
background:url(/i/bg_flower.gif);
background-size:cover;
background-repeat:no-repeat;
padding:10px;
}

</style>
</head>

<body>
<p>contain</p>
<p class="contain">

</p>

<p>cover</p>

<p class="cover">
</p>

<p>原始图片
<img src="/i/bg_flower.gif"/></p>

</body>
</html>

It can be seen that although both cover and contain maintain the aspect ratio, contain will completely include the image into the box. There are no images in some parts of the box:

And cover means that the image will completely cover the box, and some parts of the image will not be displayed:

Like +0
Add Reply
刘奇
刘奇2017-04-17 11:30:15 1 floor

http://segmentfault.com/a/1190000002481921#articleHeader8

It is said that there is an answer here...

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template