首页 新闻 会员 周边 捐助

css 中 background-size 的 cover 与 contain 的区别是什么

0
悬赏园豆:30 [待解决问题]

如题,css 中 background-size: coverbackground-size: contain 的区别是什么?

dudu的主页 dudu | 高人七级 | 园豆:31033
提问于:2020-10-15 21:15
< >
分享
所有回答(3)
1

contain 是核心点是图片要全部展示完(通过缩放或者拉伸),假设图片(100,50),那么如果容器size是(500,300),按照等比进行计算:

假设以宽度等比放大,该图片需要的容器为:500, 250(500/100 * 50),在实际容器size内,图片可以展示完

假设以高度等比放大,该图片需要的容器为600(300/50 * 100),300,超出了实际的容器,图片无法展示

因此,在 contain 模式下,图片会以宽度进行等比放大,保障展示完自身,具体效果如下:

——————————————————————————————————————————————————————

cover 的核心则是要铺满容器,为了铺满容器,那么会选择能够包裹容器的(缩放、拉伸)比率,如上的示例,则是会选择以高度进行缩放,将图片扩大到:600,300。然后用来填充容器(以左上角为开始坐标),超出部分会被隐藏。效果如下:

幻天芒 | 园豆:37205 (高人七级) | 2020-10-15 22:34

通俗易懂

支持(0) 反对(0) 田二娃 | 园豆:200 (初学一级) | 2022-11-01 13:59
0

cover
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
图片比例不变,但是要注意,超出容器的部分可能会裁掉。

contain
把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
若不能完整填充容器,X轴或Y轴都有可能出现白边,图片不变形。

详见background-size值:cover、100%和contain的区别

ycyzharry | 园豆:25683 (高人七级) | 2020-10-15 23:52
0

你自己去实践再看区别解释会理解得更透

墨_鱼 | 园豆:595 (小虾三级) | 2020-10-16 13:20
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册