cover和contain都是用图片覆盖背景区域，但是两则有不同；
首先看下下面的三种情况的事例图
背景图片未设置backgroundSize
背景图片设置backgroundSize为contain
背景图片设置backgroundSize为cover
三张图片对比可以看出了，无论设置为cover还是设置contain都使图片等比放大了。
设置contain时图片放大至满足背景区域的最小边即止，当背景区域与背景图片的宽高比不一致的情况下，背景区域可能会长边下有空白覆盖不全。
设置cover时图片放大至能满足最大变时为止，当背景区域与背景图片的宽高比不一致时，背景图片会在短边下有裁切，显示不全。
cover和contain都是用图片覆盖背景区域，但是两则有不同； 首先看下下面的三种情况的事例图 三张图片对比可...
background-size 设置背景图片的大小 值： cover和contain区别 在background-...
1、background-size : 100% 100% 与 cover 和 contain 区别 （1）1...
设置背景图片大小background-size: length|percentage|cover|contain;...
background-size: length|percentage|cover|contain cover 覆盖...
两者均以保持图像宽高比的形式缩放来适合背景容器的大小区别:在no-repeat的情况下cover:图片宽高比不变,...
background-size:contain与cover的区别： 不同之处： 1、在no-repeat情况下，如...
background-size:cover; 背景铺满元素 调整背景图片的宽度或高度（较小者），以铺满整个元素 保...
1.设置全屏的方式 viewport-fit=cover 默认值为：auto/contain，全屏值为：cov...
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。
本文标题：backgroundSize设置cover和contain的区别
本文链接：https://www.haomeiwen.com/subject/tolafktx.html
网友评论