CSS3 object-fit属性

Posted 2021-04-09 前端开发自留地

在了解object-fit之前，先了解一下何为replaced element(替换元素)

替换元素

引用MDN的概述

替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类外观渲染独立于CSS的外部对象。 典型的替换元素有 <img>、 <object>、 <video> 和 表单元素，如<textarea>、 <input> 。 某些元素只在一些特殊情况下表现为可替换元素，例如<audio>和<canvas>。 通过 CSS content属性来插入的对象 被称作匿名可替换元素（anonymous replaced elements）。

CSS在某些情况下会对可替换元素做特殊处理，比如计算外边距和一些auto值。

需要注意的是，一部分（并非全部）可替换元素，本身具有尺寸和基线（baseline），会被像vertical-align之类的一些 CSS 属性用到。

以<img>元素为例，其src属性内容不受CSS视觉格式化模型所控制，替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。

object-fit

object-fit只针对替换元素有作用。

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

object-fit属性由下列的值中选择一个关键字来指定。

fill

被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。也就是说不保证保持原有的比例，也是object-fit的默认值。

contain

被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象可能会在容器内留下空白。

cover

被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应即部分区域不可见。

none

被替换的内容尺寸不会被改变。

scale-down

内容的尺寸就像是指定了none或contain，最终呈现的是尺寸比较小的那个。

例如下方这张图片原尺寸为212*148，当通过css设置img元素宽和高就是其框的宽高为200*200时

浏览器兼容性：IE不支持

object-fit使用场景

场景一：图片列表中图片缩放后比例不对称造成的变形模糊等

场景二：用户头片缩放后比例不对称造成的变形模糊等

场景三：video中poster的img的尺寸有点小，导致video播放器两边有留白

场景四：可以重写下面background-size实现的效果

相关object-position属性请自行到MDN上查看。