理解 CSS3中 object-fit

更新日期: 2019-04-10阅读量: 2618标签: 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一致。【注:留白的部分给图片加上】


站长推荐

1.云服务推荐: 国内主流云服务商/虚拟空间,各类云产品的最新活动,优惠券领取。领取地址:阿里云腾讯云硅云

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

CSS3 transform详解,关于如何使用transform

transform是css3的新特性之一。有了它可以box module变的更真实,这篇文章将全面介绍关于transform的使用。

css3动画讲解,关于css3的@keyframes和animation

通过css3我们可以创建动画,它能取代gif图片、Flash、Js动画等,css3的animation动画是应用在html的DOM元素上的,通过样式来实现的。

css3动画transition的使用和介绍

CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体现出一种动画过程。

css3中样式计算属性calc()的使用和总结

在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border、margin、pading、font-size和width等属性都可以使用calc来设置动态值。

css3渐进增强 VS 优雅降级

进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能。

css3增加的的属性值position:stricky

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

纯css3实现饼状图

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

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

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

CSS3 动画性能优化

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

CSS3中一些鲜为人知的属性

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

点击更多...

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