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之间的主要差异 ...
随机推荐
- TOSCA自动化测试工具ppt(正在整理)
1. 认识TOSCA 安装使用 2. TOSCA自动化测试工具的优点 1). 可扩展 Tosca Commander™ functionalities can be extended by us ...
- HBase1.2.6 预分区后,数据不进入预定分区的一个 bug
rowkey 如下: 19000015115042900001511504390000151150449000015115045900001511504690000151150479000015115 ...
- Druid学习之路 (五)Druid的数据摄取任务类型
作者:Syn良子 出处:https://www.cnblogs.com/cssdongl/p/9885534.html 转载请注明出处 Druid的数据摄取任务类型 Druid支持很多种类型的数据摄取 ...
- 20145316许心远《Java程序设计》第5周学习总结
20145316 <Java程序设计>第5周学习总结 教材学习内容总结 异常处理 & Collection与Map 异常继承架构 错误的对象继承java.lang.Throwabl ...
- STM32 HAL库详解 及 手动移植
源: STM32 HAL库详解 及 手动移植
- mysql命令行创建数据库
create database publiccms; grant all privileges on publiccms.* to root@localhost identified by 'publ ...
- 20135320赵瀚青LINUX第二章读书笔记
第二章-从内核出发 获取内核代码 使用git 获取最新提交到版本树的一个副本 $ git clone git://git.kernel.org/pub/scm/linux/kernel/git/tor ...
- C++实现最基本的LRUCache服务器缓存
目录: 一.介绍: 二.数据结构: 三.主要的两个函数接口Put()和Get(): 四.C++代码实现: 后台开发必备知识,不过我不是搞这个的,只是因为很久以前就想写这些东西,事情多,拖到现在.写的过 ...
- 关于office word 应用程序下载配置
Retrieving the COM class factory for component with CLSID {000209FF-0000-0000-C000-000000000046} fai ...
- iOS开发进阶 - 基于PhotoKit的图片选择器
移动端访问不佳,请访问我的个人博客 很早之前就用OC把代码写完了并用在项目中了,一直没时间整理,现在用swift重写一份,并且更加详细的来了解这个Photos框架,下面是我集合苹果官方文档和其他大神的 ...