cover和contain都是用图片覆盖背景区域,但是两则有不同;
首先看下下面的三种情况的事例图
三张图片对比可以看出了,无论设置为cover还是设置contain都使图片等比放大了。
设置contain时图片放大至满足背景区域的最小边即止,当背景区域与背景图片的宽高比不一致的情况下,背景区域可能会长边下有空白覆盖不全。
设置cover时图片放大至能满足最大变时为止,当背景区域与背景图片的宽高比不一致时,背景图片会在短边下有裁切,显示不全。
cover和contain都是用图片覆盖背景区域,但是两则有不同;
首先看下下面的三种情况的事例图
三张图片对比可以看出了,无论设置为cover还是设置contain都使图片等比放大了。
设置contain时图片放大至满足背景区域的最小边即止,当背景区域与背景图片的宽高比不一致的情况下,背景区域可能会长边下有空白覆盖不全。
设置cover时图片放大至能满足最大变时为止,当背景区域与背景图片的宽高比不一致时,背景图片会在短边下有裁切,显示不全。
本文标题:backgroundSize设置cover和contain的区别
本文链接:https://www.haomeiwen.com/subject/tolafktx.html
网友评论