CSS3中background-size的问题

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

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

阅读 3.7k

写一段代码自己验证一下啊：

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

div {
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>
<div class="contain">

</div>

<p>cover</p>

<div class="cover">
</div>

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

</body>
</html>

可以看出，尽管cover和contain都保持了纵横比，但是contain会把图片完全包含进box，box内部有些部分没有图片：
图片描述
而cover则是图片会完全覆盖box，而图片的有些部分则会不显示：

CSS3中background-size的问题

css3如何实现这样的渐变背景?

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

请问前端小票打印各位是怎么做的？

通栏banner图片，如何不变形且内容完全显示不裁剪啊？

vue elementpuls 使用 el-tabs时，el-tab-pane里有3个v-if(echart图表，必须使用v-if)，点击时页面会转到页面最顶部？

如何在CSS中创建弧形线段（如图）？

css 中使用行内样式套行内样式，换行后，第一个字符没有定位？