通过CSS3的object-fit来调整图片适配尺寸的技巧简介


Posted in HTML / CSS onFebruary 27, 2016

你还记得通过设置图片的 background-size 属性可以解决很多问题的时刻吗?现在你可以使用 object-fit 了,它最先被 webkit 内核的浏览器支持,不久其他浏览器内核也陆续跟上,当然这里不包括IE8以下的IE浏览器...

CSS Code复制内容到剪贴板
  1. .image__contain {   
  2.   object-fit: contain;    
  3. }    
  4. .image__fill {   
  5.   object-fit: fill;    
  6. }   
  7. .image__cover {   
  8.   object-fit: cover;    
  9. }   
  10. .image__scale-down {   
  11.   object-fit: scale-down;   
  12. }  

通过CSS3的object-fit来调整图片适配尺寸的技巧简介

居中并裁剪图片
置图片的裁剪尺寸非常简单,你只需在 CSS 里使用这行代码:

CSS Code复制内容到剪贴板
  1. img {   
  2.      object-fit: cover;   
  3. }     

就是这样。不需要语义、包装 div 或者其他没意义的代码。

这种技术能很好地把大小不合适的头像图片裁剪为正方形或者圆形的图片。以下面那只熊的宽图片来举例。一旦把 object-fit:cover 技术应用在这种图片上,并且设置好宽和高,图片自己就会进行裁剪和居中。
通过CSS3的object-fit来调整图片适配尺寸的技巧简介

object-fit:cover 的裁剪方式和 background-size:cover 的完全相同,不过它是用来为 imgs、videos 和其他的媒体标签设置样式的,而不是给背景图片设置样式。

HTML / CSS 相关文章推荐
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 #HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 #HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 #HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 #HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 #HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 #HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 #HTML / CSS
You might like
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
使用正则替换变量
2007/05/05 Javascript
html数组字符串拼接的最快方法
2009/09/16 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
Python实现抢购IPhone手机
2018/02/07 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
python 如何在测试中使用 Mock
2021/03/01 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
自荐书4要点
2014/01/25 职场文书
社区综治工作汇报
2014/10/27 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
浅谈Python中对象是如何被调用的
2022/04/06 Python
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript