css3 object-fit详解

上传头像的时候遇到了头像变形的问题，最后通过object-fit: cover完美解决了。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能。

object-fit理解

CSS3 background-size出现的比较早，大家应该知道其支持的一些值，除了数值之外，其还支持几个关键字，例如：cover, contain等。

object-fit也是类似的，但还是有些差异，具体有5个值：

.fill { object-fit: fill; }

.contain { object-fit: contain; }

.cover { object-fit: cover; }

.none { object-fit: none; }

.scale-down { object-fit: scale-down; }

每个属性值的具体含义如下（自己理解的白话文，官方释义见官网）：

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

object-fit属性测试

下面我们来测试一下每一个属性值显示的效果每个img标签都设置的 width:200px 和 width:200px，再加上设置的object-fit属性的不同值，效果图如下：

object-fit兼容性

转载于:https://www.cnblogs.com/ranyonsue/p/9367423.html

css3 object-fit详解相关推荐

php开源混合模式吗,CSS3混合模式使用详解
这次给大家带来CSS3混合模式使用详解,使用CSS3混合模式的注意事项有哪些,下面就是实战案例,一起来看一下. 一.关于混合模式熟悉PS的人都应该知道混合模式: SVG以及Canvas中也有混合模式 ...
CSS3动画特效详解
大家都知道网页的3大组成部分,分别是结构,表现和行为.就像我们要盖一座房子,要地基要打的扎实,房子的架构要稳固,而我们网页当中的地基和架构就是Html,当我们盖好了房子,最终的美观度还是看我们的装修风 ...
CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
视频教程-HTML5+CSS3项目实战详解-HTML5/CSS
HTML5+CSS3项目实战详解 13年软件开发经验,设计开发30多个大型软件,涉及政府.银行.电信.能源等大型软件项目. 精通J2EE体系架构,熟练使用Struts.Spring.hibernate ...
html旋转角度计算,CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate） | 0101后花园...
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) | 0101后花园 2018-09-26 在CSS3中,可以利用transfor ...
CSS3新特性详解(二)：CSS3 字体@font-face详解、如何创建和修改woff字体文件及text-shadow等文本效果
关于CSS3新特性,在上篇博文中"CSS3新特性详解(一):CSS3选择器.边框.背景使用细节及案例演示",讨论了CSS3选择器.边框和背景,本文讨论字体@font-face使 ...
CSS3各个模块详解
一, CSS3 盒子阴影属性 box- shadow 也是 CSS3 新增的一个重要属性, 用来定义元素的盒子阴影. inset: 阴影类型, 可选值. 如果不设置, 其 ...
Oracle PL/SQL存储过程对象类型Object type详解 create type obj_type as object, create table tab_name of obj_type
原 oracle 对象类型 object type 置顶 2011年06月13日 18:00:00 oypj2010 阅读数:3453 /* 对象类型属于用户自定义的一种复合类型,它封装了数据结构和拥 ...
HTML+CSS教程（十）css3(3D属性详解及动画)
一.3D 转换 1.左手坐标系 :伸出左手,让拇指和食指成"L"形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X.Y.Z 轴的正方 ...
html5 css3基础知识详解
如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了 CSS2的众多不足之处,使得Web开发变得更为高效和便捷. Html4 ...

css3 object-fit详解

css3 object-fit详解相关推荐

最新文章

热门文章