你可能不知道的CSS3属性： object-fit,object-position的妙用

最近在一个项目中解决视频(video标签)的时候，发现一个新东西"object-fit"，之前没有了解过这些属性，于是查阅了相关一些资料，发现这个属性挺有用的，给大家推荐一下。

简介
官方原文：

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

The object-position property determines the alignment of the replaced element inside its box.

object实际上指的是replaced element(替换元素)(W3C, MDN)

替换元素
不是所有元素都叫“替换元素”。在CSS中，“替换元素”指的是：
其内容不受CSS视觉格式化模型控制的元素，比如image, 嵌入的文档(iframe之类)或者applet。比如，img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另一方面，其他文档也可能没有固有的尺寸，比如一个空白的html文档。

CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object, video, textarea, input也是替换元素，audio和canvas在某些特定情形下为替换元素。

使用CSS的content属性插入的对象是匿名替换元素。

也就是说，本文的object-position和object-fit只针对替换元素有作用，也就是form表单家族控件系列，老牌劲旅img图片，HTML5新贵video视频等元素（SVG元素不支持，但可以作为src替换内容出现）。

关于视频poster封面图片
chrome中默认是object-fit:contain，当poster尺寸过小的时候就会如下问题：

注意播放器两边的留白，显然这不是我们想要的样式，如果能完全覆盖就更好了。尝试按照background-size属性的写法尝试了改写为cover。效果如下：

参数值

.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, 最终呈现的是尺寸比较小的那个。

理解要点
img是个元素，且是个替换元素，这个通过上面的学习应该都知道；
一个图片，如果没有src，它依然是个替换元素，它在浏览器中的解析依然是正确的；

src指向的图片属于替换内容，注意，这个替换内容和这个img替换元素是壳子与内容的关系，两者是独立的。在CSS2.1时代，壳子的实际尺寸（如果没有CSS或HTML设置），则是跟随内容的实际尺寸，因此，网页加载的时候，我们会看到图片占据的高度从0到图片实际高度跳动的过程；如果壳子，也就是img有尺寸限制，则替换内容fill拉伸适应于 img替换元素的设定尺寸。总而言之，壳子与内容的尺寸永远是一样的。于是，我们就会误认为图片就是那个图片，唯一的存在，导致我们理解object-fit的特性表现出现了障碍。
在CSS3时代，object-fit的世界里，object-fit控制的永远是替换内容的尺寸表现，注意，是替换内容的尺寸表现，不是img替换元素。

之所以object-fit:contain会透明留白，是因为我们没有对壳子img设置背景色，假设我们给壳子img增加个红色背景，大家就会明白我说的意思了：
.box > img { width: 100%; height: 100%; background-color: #cd0000; }

效果如下截图，会发现，原来的透明留白现在是红色背景，说明了什么？说明img替换元素和src替换内容是两个独立体。img替换元素受到了CSS 100%拉伸控制（所以红色背景充满容器），src替换内容也受到了object-fit展示控制。大家各司其职，没有什么覆盖冲突！

假设我们使用的原始图片是：

容器的尺寸是160*160, 背景色是灰蓝色，同时，测试的图片高宽设置为100%, 如下CSS代码：

.box { width: 160px; height: 160px; background-color: #beceeb; }
.box > img { width: 100%; height: 100; }

结果，各个属性值的表现如下截图：

object-fit兼容性

object-position理解
object-position要比object-fit单纯的多，就是控制替换内容位置的。默认值是50% 50%，也就是居中效果，所以，无论上一节object-fit值为那般，图片都是水平垂直居中的。因此，下次要实现尺寸大小不固定图片的垂直居中效果，可以试试object-fit.

与background-position类似，object-position的值类型为<position>类型值。也就是说，CSS3的相对坐标设定样式支持的。

例如替换内容一直定位在容器的右下角：object-position: 100% 100%;

你可能不知道的CSS3属性： object-fit,object-position的妙用相关推荐

ES6 你可能不知道的事 – 基础篇
ES6 你可能不知道的事 – 基础篇转载作者:淘宝前端团队(FED)- 化辰链接:taobaofed.org/blog/2016/07/22/es6-basics/ 序 ES6,或许应该叫 ES ...
「从源码中学习」面试官都不知道的Vue题目答案
前言当回答面试官问及的Vue问题,我们除了照本宣科的回答外,其实还可以根据少量的源码来秀一把,来体现出你对Vue的深度了解. 本文会陆续更新,此次涉及以下问题: "new Vue()做了什 ...
被低估的css滤镜,你所不知道的 CSS 滤镜技巧与细节
本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 系列 CSS 文章汇总在我的 Github ,持续更新,欢迎点个 star 订阅收藏. OK,下面直接进入正文.本文所描述的滤镜,指 ...
servlet后台如何接受multpartfile_Servlet进阶教程（你不得不知道的Servlet知识点）
" 人生的游戏不在于拿了一副好牌,而在于怎样去打好坏牌,世上没有常胜将军,勇于超越自我者才能得到最后的奖杯." 你好,我是梦阳辰!快和我一起学习吧! 精彩回放: Servlet入门 ...
堆栈溢出 java_堆栈溢出回答了我们所不知道的Java首要问题
堆栈溢出 java 您不应该错过的堆栈溢出问题集合: 这不是秘密: 我们都使用堆栈溢出. 它拥有生命,宇宙和几乎所有与代码相关的答案. 该平台为开发人员,工程师和其他人员提供了一个找到他们所面临问题的 ...
堆栈溢出回答了我们不知道的Java首要问题
您不应该错过的堆栈溢出问题集合: 这不是秘密: 我们都使用堆栈溢出. 它掌握了生命,宇宙以及几乎所有与代码相关的内容的答案. 该平台为开发人员,工程师和其他人员提供了一个找到他们所面临问题的答案的地方 ...
异步height:calc_异步：您尚不知道的承诺（第1部分）
异步height:calc This is a multi-part blog post series highlighting the capabilities of asynquence, a p ...
你可能不知道的5种 CSS 和 JS 的交互方式
翻译人员: 铁锚翻译日期: 2014年01月22日原文日期: 2014年01月20日原文链接: 5 Ways that CSS and JavaScript Interact That You ...
ECMA262 Edition5 Object,Object的属性和方法,Object.prototype的方法.
ES5,为Object添加了一批方法.了解这些方法,可以更好的理解属性描述符的应用. 所以还是很有必要读一读的.另外,这些方法用起来还是蛮给力的. 暂时对于ES5,就只放出这些吧,希望对大家有所帮助. ...
你所不知道的日志异步落库
https://www.cnblogs.com/scy251147/p/9193075.html 在互联网设计架构过程中,日志异步落库,俨然已经是高并发环节中不可缺少的一环.为什么说是高并发环节中不可 ...

你可能不知道的CSS3属性： object-fit,object-position的妙用

你可能不知道的CSS3属性： object-fit,object-position的妙用相关推荐

最新文章

热门文章