浅谈background-size

2020-02-13

语法:

background-size: length|percentage|cover|contain;

length :设置背景图片高度和宽度。
percentage:将计算相对于背景定位区域的百分比。
cover: 保持图像的纵横比,并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain:保持图像的纵横比,并将图像缩放成将适合背景定位区域的最大大小。


1. length

参数为具体的数值,第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto。
例如:

background-size: 200px;

在500x300的容器中设置前后的效果如下(图片原大小为500x500):

1.png


https://codepen.io/jianxiujiucan/pen/GRJJgQE

2. percentage

参数为百分比,主要相对于容器的大小。
第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为auto。

例如:

background-size: 90% 80%; // 在本例500*300的容器里,等同于background-size: 450px 240px;

效果如下:

2.png


3.cover

cover参数能保证图片永远按比例撑满容器
效果如下:

4.contain

contain 参数能保证图片永远能完整显示在容器中

4.png


原文链接:segmentfault.com

上一篇:关于animation和transition一点知识
下一篇:UI自动化测试框架辅助工具 web chrome plugin
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部