通过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 相关文章推荐
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 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根据IP判断地区名信息的示例代码
2014/03/03 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
js实现纯前端的图片预览
2016/04/27 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
python 连续不等式语法糖实例
2020/04/15 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
应届生财务会计求职信
2013/11/05 职场文书
超市5.1促销活动
2014/01/15 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫