理解 CSS3中 object-fit

时间: 2019-04-10阅读: 330标签: css3

在检查网站的时候发现图片给于固定宽的时候,会压缩变形,要保证,img元素不变形,宽高比不变。从别人那里了解到object-fit,以前从未用过,所以就总结给自己看看,理解一下。

object-fit css属性指定可替换元素的内容应该如何适应到其使用高度和宽度确定的框内。


object-fit 的语法:

object-fit属性 fill | contain | cover | none | scale-down

fill 中文释义“填充”,默认值。替换的内容正好填充元素的内容宽,替换内容拉伸填满整个content box,不保证保持原有的比例。

contain 中文释义“包含”。保持原有的尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能在容器内一下空白。

cover 中文释义“覆盖”。保持原有的尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容部分区域不可见。

none 中文释义“无”。保持原有的尺寸比例。同时保持替换内容原始尺寸大小。

scale-down 中文释义“降低”。内容的尺寸与none或contain中的一个相同,取决于它们之间谁得到的对象尺寸会更小。

容器的宽高是200px,背景为粉色,css代码如下:

.container li{display: inline-block;}
.box { width: 200px; height: 200px; margin: 10px 0 20px; background-color: pink; overflow: hidden; resize: both;}
.box>img{width: 100%;height: 100%;}
.fill{object-fit: fill;}
.contain{object-fit: contain;}
.cover{object-fit: cover;}
.none{object-fit: none;}
 .scale-down{object-fit: scale-down;}


综上所述,object-fit:contain和object-fit:scake-down的表现是一致的。但是当容器的尺寸拉伸到比图片实际尺寸还要大时,效果与none一致。【注:留白的部分给图片加上】


链接: http://www.fly63.com/article/detial/2792

css3常用动效以及总结

box-shadow:盒子阴影,可以给卡片添加提高美化效果。可广泛应用于内容展示页面。css3 过渡:最简单的过渡是一个div,给它加上如下代码,便可以从宽度100px华丽的过渡到宽度为300px。

css3新特性总结

css3新特性总结:圆角边框、多背景图、颜色和透明度(由原来的rgb到现在的rgba)、多列布局和弹性盒模型、盒子的变幻(2D、3D)、过渡和动画、引入web字体(在服务器端存储)、媒体查询、阴影

用CSS3实现无限循环的无缝滚动

使在页面中循环展示信息的功能之前一般是用js来实现的,那么用CSS3该如何实现实现呢;使用CSS来进行动画的展示,会让页面显得更加流畅。如果能用CSS实现,可以尝试尽量用CSS实现下

css3中计数器的使用

css3里有个很强大的功能,就是计算器,使用它可以很方便对页面中的任意元素进行计数,实现类似于有序列表的功能。与有序列表相比,突出特性在于可以对任意元素计数,同时实现个性化计数。

css3特效_CSS3弹跳Loading加载动画特效的实现

今天给大家分享一款非常常用的css 加载动画,这款CSS3 Loading动画主要由几个小球通过规律的上下跳动,渐隐渐显而成,效果十分不错。尤其在移动端中使用,基本代替了图片来实现加载的效果。

CSS3中一些鲜为人知的属性

CSS3是CSS(层叠样式表)技术的升级版本,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。这篇文章主要整理一些关于css3中的鲜为人知的属性

CSS3 动画性能优化

CSS3 动画给 Web 的用户体验带来了巨大提升,本文将尝试从浏览器渲染的角度,来解析动画优化的原理及其技巧。为大家提供一些动画性能优化的参考。

css3实现背景图片颜色修改的多种方式

css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。

纯css3实现饼状图

网页中,有时候会碰到饼状图的需求,比如统计图表,进度指示器,定时器等,实现方式也是各种各样,现在也有不少现成的js库,可以直接拿来使用,方便很多。这里笔者为大家演示一种纯css实现饼状图效果的方法。

css3增加的的属性值position:stricky

position:sticky,这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。position:sticky 的生效是有一定的限制的

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全