[css]backgroundSize设置cover和contain的区别

at 2019.09.15 17:15  ca 前端实例收藏  pv 1544  by yanjun202  

cover和contain都是用图片覆盖背景区域,但是两则有不同;

首先看下下面的三种情况的事例图

[css]backgroundSize设置cover和contain的区别

背景图片未设置backgroundSize

[css]backgroundSize设置cover和contain的区别

背景图片设置backgroundSize为contain


[css]backgroundSize设置cover和contain的区别

背景图片设置backgroundSize为cover

三张图片对比可以看出了,无论设置为cover还是设置contain都使图片等比放大了。

设置contain时图片放大至满足背景区域的最小边即止,当背景区域与背景图片的宽高比不一致的情况下,背景区域可能会长边下有空白覆盖不全。

     通俗的理解:图片和盒子的三个边重合,图片可以看全

设置cover时图片放大至能满足最大变时为止,当背景区域与背景图片的宽高比不一致时,背景图片会在短边下有裁切,显示不全。

   通俗的理解:图片和盒子的四个边变重合,图片会裁剪

作者:yunshengz

链接:https://www.jianshu.com/p/ca556bbe842b

来源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


本文链接:https://www.yanjun202.com/post/15.html 

分享到:

 

扫一扫在手机阅读、分享本文

已有1条评论
    w***8(匿名)  发布于 2023-11-29 02:57:14   回复

    这篇文章写的真好,写的非常详细,内容丰富,图文并茂,很实用认真看完收获很大,期待博主下一篇精彩文章的更新。