详解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+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
html5通过postMessage进行跨域通信的方法
Dec 04 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
HTML5 新增内容和 API详解
Nov 17 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
php防攻击代码升级版
2010/12/29 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
python读取word文档的方法
2015/05/09 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
便捷提取python导入包的属性方法
2018/10/15 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
Python截图并保存的具体实例
2021/01/14 Python
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
印刷技术专业自荐信
2014/09/18 职场文书
情况说明书格式及范文
2019/06/24 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
Python音乐爬虫完美绕过反爬
2021/08/30 Python
vue打包时去掉所有的console.log
2022/04/10 Vue.js