一:background-size: contain 与cover的区别:

作用: 都是将图片以**相同宽高比**缩放以适应整个容器的宽高。

不同之处在于:
1.  在no-repeat情况下,如果容器宽高比与图片宽高比不同,

  cover:图片宽高比不变、铺满整个容器的宽高,而图片多出的部分则会被截掉;

  contain:图片自身的宽高比不变,缩放至图片自身能完全显示出来,所以容器会有留白区域;

PS:其实,从英文的意思来说:cover意味着“遮罩、遮盖”---此处理解为“塞满”较恰当,contain意为“包含”--也就是:我图片虽然缩放了,但是整个图是被“包含”在你里面的,你必须把我显示完整、不能裁剪我一丝一毫~

2.  在repeat情况下:cover:与上述相同;contain:容器内至少有一张完整的图,容器留白区域则平铺背景图,铺不下的再裁掉。

-------------------

例子:

先上原图:宽高600*1069

代码:

    <div class="img-block"></div>

css代码之no-repeat:cover版:

.img-block{
width: 200px;
height: 200px;
border:2px solid black;
background:url(../img/justice.jpg) no-repeat;
background-size:cover;
}

效果图:

看的出来:cover的效果是:图片同比缩放、塞满整个容器,而图片多余的部分则被剪掉了;

css代码之no-repeat:contain版:

.img-block{
width: 200px;
height: 200px;
border:2px solid black;
background:url(../img/justice.jpg) no-repeat;
background-size:contain;
}

效果图:

看得出来:contain版:图片同比缩放至图片能完全显示在容器中,故容器有留白。so,这就涉及到俺最开始说的background-repeat了。

如果情况变成background-repeat:repeat,(其他代码不变)那么此处的留白区域会再平铺一张背景图,而且肯定是铺不满一张的,那么这第二张背景图才会被截断;效果入下:

然后我估计看文的某些懒人会懒得去翻上面的CSS代码,所以这里我就写一遍吧~

background-repeat:repeat情况之background-size:contain版

        .img-block{
width: 200px;
height: 200px;
border:2px solid black;
background:url(../img/justice.jpg);
background-size:contain;
}

二:background-size 在ie7\8的兼容写法:用filter滤镜

至于ie6?我至今不知道ie6咋个整。如果你知道,请务必告诉我~

css中加入一句:

 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/justice.jpg',sizingMethod='scale');

参数解释:

src="图片路径",可以是相对,也可以是绝对;

sizingMethod:“scale|crop|image” 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。

   crop:剪切图片以适应对象尺寸。 
  image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 
  scale:缩放图片以适应对象的尺寸边界。

PS:注意:如果设置了background-attachment:fixed;会是background-size属性失效

background-size: contain 与cover的区别,以及ie78的兼容写法的更多相关文章

  1. CSS background-size contain 与cover的区别

    最近在重温CSS,发现好多东西都忘了,比如background-size属性中,contain与cover的区别. 菜鸟教程上是这么说的: 有点难理解,通俗解释就是:两者均以保持图像宽高比的形式缩放来 ...

  2. background-size:100% 100% 和 background-size:cover的区别简述

    下面我通过给下图背景图添加background-size属性的不同属性值,更直观的显示出100%和cover的区别   下图是添加background-size:100% 100% 后的背景图效果,背 ...

  3. 原生JS forEach()和map()遍历的区别以及兼容写法

    一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...

  4. 今天碰到一个问题,怎么限制用户在固定宽度的input输入框里输入的长度,由此涉猎到了maxlength属性和size属性以及它们的区别。

    最开始想首先要强制在一行,另外超出的隐藏.还有一个思路是把value的值的长度和框的长度怎么联系起来,具体怎么联系我也不知道. 在解决另外一个问题的时候,哥发给我的代码里无意中看见input有个max ...

  5. Input的size与maxlength属性的区别

    最近做项目用到input的size和maxlength属性,以前只顾用没有用心去看看这2个标签的区别,今天周末baidu了一下,有所理解.特记录于此!   <p>Name: <inp ...

  6. C++ string的size()和length()函数没有区别

    C++标准库中的string中两者的源代码如下:      size_type   __CLR_OR_THIS_CALL   length()   const     { //   return   ...

  7. 请求返回时的Size/Content Time/Latency的区别

    Size/Content: Size是响应头部和响应体结合起来的大小,Content是请求内容解码后的大小.进一步了解可以看这里Chrome Dev Tools - “Size” vs “Conten ...

  8. screen,client,page三种确定鼠标坐标的区别和原生JS事件写法,区别于Jquery的$.on(x,y);和$.click()

    screenX clientX pageX的区别 screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟scre ...

  9. Python - Python2与Python3的区别、转换与兼容

    区别 Python2.x与Python3.x版本区别:http://www.runoob.com/python/python-2x-3x.html 示例解读Python2和Python3之间的主要差异 ...

随机推荐

  1. TOSCA自动化测试工具ppt(正在整理)

    1.  认识TOSCA 安装使用 2.  TOSCA自动化测试工具的优点 1).  可扩展 Tosca Commander™ functionalities can be extended by us ...

  2. HBase1.2.6 预分区后,数据不进入预定分区的一个 bug

    rowkey 如下: 19000015115042900001511504390000151150449000015115045900001511504690000151150479000015115 ...

  3. Druid学习之路 (五)Druid的数据摄取任务类型

    作者:Syn良子 出处:https://www.cnblogs.com/cssdongl/p/9885534.html 转载请注明出处 Druid的数据摄取任务类型 Druid支持很多种类型的数据摄取 ...

  4. 20145316许心远《Java程序设计》第5周学习总结

    20145316 <Java程序设计>第5周学习总结 教材学习内容总结 异常处理 & Collection与Map 异常继承架构 错误的对象继承java.lang.Throwabl ...

  5. STM32 HAL库详解 及 手动移植

    源: STM32 HAL库详解 及 手动移植

  6. mysql命令行创建数据库

    create database publiccms; grant all privileges on publiccms.* to root@localhost identified by 'publ ...

  7. 20135320赵瀚青LINUX第二章读书笔记

    第二章-从内核出发 获取内核代码 使用git 获取最新提交到版本树的一个副本 $ git clone git://git.kernel.org/pub/scm/linux/kernel/git/tor ...

  8. C++实现最基本的LRUCache服务器缓存

    目录: 一.介绍: 二.数据结构: 三.主要的两个函数接口Put()和Get(): 四.C++代码实现: 后台开发必备知识,不过我不是搞这个的,只是因为很久以前就想写这些东西,事情多,拖到现在.写的过 ...

  9. 关于office word 应用程序下载配置

    Retrieving the COM class factory for component with CLSID {000209FF-0000-0000-C000-000000000046} fai ...

  10. iOS开发进阶 - 基于PhotoKit的图片选择器

    移动端访问不佳,请访问我的个人博客 很早之前就用OC把代码写完了并用在项目中了,一直没时间整理,现在用swift重写一份,并且更加详细的来了解这个Photos框架,下面是我集合苹果官方文档和其他大神的 ...