CSS3中background-size的问题
问题描述
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
这里面说的最大大小和最小大小该怎么理解呢？为什么我觉得它们好像没有区别啊？
问题解答
回答1：写一段代码自己验证一下啊：
<!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='https://www.haobala.com/i/bg_flower.gif'/></p></body></html>
可以看出，尽管cover和contain都保持了纵横比，但是contain会把图片完全包含进box，box内部有些部分没有图片：
而cover则是图片会完全覆盖box，而图片的有些部分则会不显示：
http://segmentfault.com/a/1190000002481921#articleHeader8
据说这里有答案……
相关文章：
1. javascript - 在静态页面上用load 引入的页面文件问题？2. java后台导出页面到pdf3. javascript - webpack打包后的bundlejs文件代码不知道什么意思.4. Java游戏服务器开发和网站、app服务端的开发都差不多的吗？？？实现的思路和方法5. android - RxJavar用什么操作符可以使数据每隔一段时间取出一个6. html - 哪些情况下float会失效？7. css - 关于ul的布局8. css - 如何使用 vue transition 实现 ios 按钮一样的平滑切换效果9. java - oracle对汉字字段按照拼音排序的函数和sql语句是什么？10. javascript - vue组件通过eventBus通信时，报错a.$on is not a function
网公网安备