通过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 相关文章推荐
css3实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 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 strncasecmp字符串比较的小技巧
2011/01/04 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
在Python中使用SQLite的简单教程
2015/04/29 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
python删除某个目录文件夹的方法
2020/05/26 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
自荐信如何制作?
2014/02/21 职场文书
保安公司服务承诺书
2014/05/28 职场文书
建筑管理专业求职信
2014/07/28 职场文书
家庭贫困证明
2014/09/23 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
社团招新宣传语
2015/07/13 职场文书
餐馆开业致辞
2015/08/01 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android