通过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截取字符串实例代码【推荐】
Jun 07 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
HTML中link标签属性的具体用法
May 07 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
file_get_contents("php://input", "r")实例介绍
2013/07/01 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
js实现左右两侧浮动广告
2018/07/09 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
python类继承用法实例分析
2015/05/27 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
营销专业应届生求职信
2013/11/26 职场文书
美术教师自我鉴定
2014/02/12 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
党员自评材料范文
2014/12/17 职场文书
志愿者个人总结
2015/03/03 职场文书
基石观后感
2015/06/12 职场文书
mysqldump进行数据备份详解
2022/07/15 MySQL