background-size: contain 与cover的区别,以及ie78的兼容写法
一: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的兼容写法的更多相关文章
- CSS background-size contain 与cover的区别
最近在重温CSS,发现好多东西都忘了,比如background-size属性中,contain与cover的区别. 菜鸟教程上是这么说的: 有点难理解,通俗解释就是:两者均以保持图像宽高比的形式缩放来 ...
- background-size:100% 100% 和 background-size:cover的区别简述
下面我通过给下图背景图添加background-size属性的不同属性值,更直观的显示出100%和cover的区别 下图是添加background-size:100% 100% 后的背景图效果,背 ...
- 原生JS forEach()和map()遍历的区别以及兼容写法
一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
- 今天碰到一个问题,怎么限制用户在固定宽度的input输入框里输入的长度,由此涉猎到了maxlength属性和size属性以及它们的区别。
最开始想首先要强制在一行,另外超出的隐藏.还有一个思路是把value的值的长度和框的长度怎么联系起来,具体怎么联系我也不知道. 在解决另外一个问题的时候,哥发给我的代码里无意中看见input有个max ...
- Input的size与maxlength属性的区别
最近做项目用到input的size和maxlength属性,以前只顾用没有用心去看看这2个标签的区别,今天周末baidu了一下,有所理解.特记录于此! <p>Name: <inp ...
- C++ string的size()和length()函数没有区别
C++标准库中的string中两者的源代码如下: size_type __CLR_OR_THIS_CALL length() const { // return ...
- 请求返回时的Size/Content Time/Latency的区别
Size/Content: Size是响应头部和响应体结合起来的大小,Content是请求内容解码后的大小.进一步了解可以看这里Chrome Dev Tools - “Size” vs “Conten ...
- screen,client,page三种确定鼠标坐标的区别和原生JS事件写法,区别于Jquery的$.on(x,y);和$.click()
screenX clientX pageX的区别 screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟scre ...
- Python - Python2与Python3的区别、转换与兼容
区别 Python2.x与Python3.x版本区别:http://www.runoob.com/python/python-2x-3x.html 示例解读Python2和Python3之间的主要差异 ...
随机推荐
- js实现excel的解析
在浏览网页的时候不小心看到了这个github的资源(https://github.com/SheetJS/js-xlsx),真不错.之前在开发的时候曾遇到客户要求在前端解析excel并展示出来.这里记 ...
- igraph Tutorial
igraph Tutorial¶ 参考http://www.cs.rhul.ac.uk/home/tamas/development/igraph/tutorial/tutorial.html ...
- CSS 媒体类型
CSS 媒体类型 媒体类型允许你指定文件将如何在不同媒体呈现.该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等. 一.媒体类型 一些CSS属性只设计了某些媒体.例如"voice ...
- 你可能不熟悉的JS总结
暂时性死区 只要块级作用域存在let命令,它所声明的变量就"绑定"这个区域,不再受外部的影响.这么说可能有些抽象,举个例子: var temp = 123; if(true) { ...
- 非root权限 安装更新gcc
本文主要参考网络上文章,并根据自己安装出现的问题进行补充. 参考文章: 1.gcc和boost的升级步骤(非root权限):https://blog.csdn.net/u010246947/artic ...
- 20145307第9周JAVA学习报告
20145307陈俊达 <Java程序设计>第9周学习总结 教材学习内容总结 JDBC(Java DataBase Connectivity)即java数据库连接,是一种用于执行SQL语句 ...
- Swift开发之泛型实例
一.Swift泛型 泛型能够让开发者编写自定义需求已经任意类型的灵活可用的的函数和类型.能够让我们避免重复的代码.用一种清晰和抽象的方式来表达代码的意图. func swapTwoStrings(_ ...
- C#的switch case注意
参数可以是 switch 语句中的 参数必须是一个整型或枚举类型,或者是一个 class 类型,其中 class 有一个单一的转换函数将其转换为整型或枚举类型. 所以用string也可以,6666
- zabbix_server.log大量提示cannot send list of active checks to "IP": host [HostName] not found
zabbix server 日志大量提示上图信息 原因是 zabbix_agent.conf配置文件中配置的HostName与zabbix的web界面配置的不同导致的 zabbix_agent.con ...
- 安装完kali需要做的一些事情
1. 没有声音的问题[ kali ] 参考:http://tieba.baidu.com/p/4343219808 用pulseaudio --start会看到一些信息,提示类似root用户之类的 我 ...