css3边框讲解(详解css3 object-fit属性)
类别:Web前端 浏览量:101
时间:2022-03-30 09:17:22 css3边框讲解
详解css3 object-fit属性上传头像的时候遇到了头像变形的问题,最后通过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属性的不同值,效果图如下:
object-fit 兼容性
总结
以上所述是小编给大家介绍的css3 object-fit属性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
标签:CSS3 object-fit
您可能感兴趣
- css3实现凸起效果(CSS3轻松实现圆角效果)
- css3渐变样式怎么用(CSS3 background-image颜色渐变的实现代码)
- css3网格布局图(详解CSS3 弹性布局快速入门)
- html5css3旋转特效效果(一款利用html5和css3实现的3D立方体旋转效果教程)
- css3最新特效(CSS3实现的文字弹出特效)
- css3实现120度的箭头(使用css实现任意大小、任意方向和任意角度的箭头示例)
- css3动画怎么实现的(css3中用animation的steps属性制作帧动画)
- css3无缝滚动效果(CSS3 制作的图片滚动效果)
- css3行内样式表图解(详解css3自定义滚动条样式写法)
- css3结合js制作(CSS3截取字符串实例代码推荐)
- css3特性动画图(CSS3轻松实现清新 Loading 效果的简单实例)
- css3过渡技巧视频(css3过渡_动力节点Java学院整理)
- css3渐变动画(CSS3径向渐变radial-gradient实现波浪边框和内倒角的方法)
- css3背景渐变动画效果(css3制作的背景渐变动画效果)
- css3 图片样式处理(CSS3实现漂亮的照片墙效果的简单实例推荐)
- javascript编写的小游戏(CSS3 实现NES游戏机的示例代码)
- 挑战新国标电自天花板,九号机械师MMAX 110P深度体验(挑战新国标电自天花板)
- 《满江红》不要只当电影看,学生应该这样做(满江红不要只当电影看)
- 电影《民间怪谈录之走阴人》定档8月5日,开启一场中式惊悚之旅(电影民间怪谈录之走阴人定档8月5日)
- 原创图画书,以儿童视角讲述中国故事(以儿童视角讲述中国故事)
- 八月再见 愿你岁月不扰,余生静好(八月再见愿你岁月不扰)
- 赏读 八月再见,九月你好(赏读八月再见九月你好)
热门推荐
- IT技术类在团队管理上的几个建议
- django settings配置(Django重置migrations文件的方法步骤)
- 如何挑选企业云主机的配置(看云主机配置哪些才是关键?)
- sql server 2012 错误5123(SQL SERVER 9003错误解决方法)
- sqlserver2000显示无服务器(SQL SERVER 2000 9003错误的解决方法只适用于SQL2000)
- pythonfor循环如何遍历嵌套列表(在Python中,不用while和for循环遍历列表的实例)
- video tv cast怎么用(video下autoplay属性无效的解决方法添加muted属性)
- vue函数中的默认参数(Vue3中SetUp函数的参数props、context详解)
- 如何设置虚拟主机(虚拟主机空间怎么选择?)
- pyqt一键部署python环境(python使用PyQt5的简单方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9