background-size cover和contain的区别

相同点：图片都是等比例缩放

不同点：cover是铺满整个显示区域。如果显示比例和显示区域的比例相差很大某些部分会不显示

比如下面这张图，宽比高大很多，使用cover那么两边的就不会显示

 background:#ccc url(111.jpg) no-repeat center top; background-size: cover;

显示结果：

两边的去掉很多，如果图片很小就会放大到没有空白，其中一边就会不显示

contain：正好相反，他是按照某一边来覆盖显示区域的，会有白边

还是上面那张图，他按照宽度来适应显示区域，按照等比例那么高度就会很矮

背景图全屏展示方法：http://huilang.me/perfect-full-page-background-image/

background-size cover和contain的区别相关推荐

CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?...
原文:CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size? 其实方法非常简单,直接写代码: &l ...
strlen、sizeof与size()求字符串长度的区别
strlen.sizeof与size()求字符串长度的区别 cout<<strlen("123")<<endl; //返回 3 cout<<si ...
C++ string 成员函数 length() size() 和 C strlen() 的区别
1.函数申明 C++ string 成员函数 length() 等同于 size(),但是和 C 库函数 strlen() 有着本质区别,使用时切勿混淆.首先看一下三个函数的申明: // 返回 str ...
ESP8266 烧写选项 Flash Size 32M和32M-c1的区别
在ESP8266烧写的时候,Flash Size有两个选项让很多初学者困惑,一个是32Mbit,一个是32Mbit-C1.那么这两者有什么区别呢? 我们知道ESP8266根据不同的Flash容量大小是 ...
background与background-color 你“不知道”的区别
background与background-color的区别有时候你是不是会有疑问,当你在ul >li>a中把a设置成了display:block 开始时用background设置了背景 ...
css background-size属性cover和contain的区别
总结了一下这两个属性的区别,简单来说就是在no-repeat的情况下 cover不会留白,如果容器宽高小于图片的宽高,会把多余的部分截掉也就是容器高度超过图片原有比例,图片的宽会缺失,通俗点讲,就 ...
C++ Vector中size()和capacity（）区别
简单而言,size()指的是当前Vector中存放元素的大小,即他当前存放了多少个元素,capacity()指的是他能够存放多少个元素. 两个方法可以控制存放元素的大小和最大容纳数量 reserve可 ...
size(),length和length()的区别（最详细版）
首先区分一下length和length(): length不是方法,是属性,数组的属性: public static void main(String[] args) {int[] intArray ...
background-size中，contain、cover、100%的区别
语法: background-size: length|percentage|cover|contain; 值描述 length 设置背景图像的高度和宽度; 第一个值设置宽度,第二个值设置高度;如果 ...

background-size cover和contain的区别

background-size cover和contain的区别相关推荐

最新文章

热门文章