css background-size 100% 与 cover 的区别

更新日期: 2020-08-19 阅读次数: 3748 字数: 254 分类: CSS

今天在小程序中使用图片作为 view 背景时,发现背景图显示不完整,使用的是 css

background-size: cover;

可是之前这样用时,从来没遇到这种情况。仔细对比了一下,发现:

  • 显示正常的情况是,view 区域很大,背景图没有完整显示的要求
  • 显示不正常的是,view 区域很小,而背景图相对大一些,这种情况背景图没有显示完整

改用

background-size:100% 100%;

之后,就显示正常了。

所以,整理了一下这两者的区别。

100% 使用场景

当背景图必须完整显示全时,使用

background-size:100% 100%;

但是会变形。

cover 使用场景

当背景图不是很重要时,只需要把 div 区域填充满

background-size: cover;

不会变形,但是可能部分区域不可见。

Basically it zooms in until the inner most edges are touching the side, which means that some of the image may be cut off.

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式