详解css3 object-fit属性


Posted in HTML / CSS onJuly 27, 2018

上传头像的时候遇到了头像变形的问题,最后通过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属性的不同值,效果图如下:

详解css3 object-fit属性 

object-fit 兼容性

详解css3 object-fit属性 

总结

以上所述是小编给大家介绍的css3 object-fit属性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3实现精美横向滚动菜单按钮
Apr 14 HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
Jun 05 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 #HTML / CSS
详解CSS3伸缩布局盒模型Flex布局
Aug 20 #HTML / CSS
css3动画效果抖动解决方法
Sep 03 #HTML / CSS
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 #HTML / CSS
CSS3 background-image颜色渐变的实现代码
Sep 13 #HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 #HTML / CSS
详解css3 mask遮罩实现一些特效
Oct 24 #HTML / CSS
You might like
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
python标准日志模块logging的使用方法
2013/11/01 Python
python脚本实现查找webshell的方法
2014/07/31 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
python 负数取模运算实例
2020/06/03 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
python 制作磁力搜索工具
2021/03/04 Python
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
白酒业务员岗位职责
2013/12/27 职场文书
临床专业自荐信
2014/06/22 职场文书
大学生村官入党自传
2015/06/26 职场文书
Java spring单点登录系统
2021/09/04 Java/Android