【CSS】可替换元素的控制属性：object-fit属性和object-position属性

一、可替换元素是什么？

可替换元素指的是其展现的效果和内容是不受到css控制的，而是由外部资源来决定的。

典型的可替换元素有<iframe>、<img>、<video>、<embed>，有些情况下canvas、audio、object、option、以及type="image"的input元素也会以可替换元素处理

具体来说有以下特点

• 元素内容在其框中的位置或者定位方式，仅有部分特定属性控制
  • object-fit：控制内容对象的填充方式（功效类似于background-size，但前者不可设置内容宽高的具体数值，而background-size可以）
  • object-position：内容对象在盒中的位置（功效类似于background-position）
• 普通css属性修改可替换元素时，内部内容不继承父文档的样式

PS：background属性是利用css插入元素的背景图，在使用场景上还是有本质区别的

二、object-fit属性

1、含义

object-fit属性指定可替换元素（ 例如<img>或者<video>）的内容应该以何种填充方式，适应到其元素现有高度和宽度的框内。

2、可选值

• none：保持内容的原有尺寸，不做任何缩放操作。
• fill：保证内容正好填充满元素，非等比缩放，因此可能对原来的内容对象造成拉伸
• contain：保证内容对象被完全展现，并适应元素宽高进行等比缩放，不一定铺满元素
• cover：使内容填满元素，并保证原本的宽高比，等比缩放
• scale-down：等比呈现图像，取"none”和"contain"之中呈现效果最小的方式

三、object-position属性

object-position属性规定了可替换元素的内容在框中呈现的位置。

其取值可以是单个关键字，也可以是分别定义x轴、y轴上的位置，也可以是分别定义上、下、左、右的偏移量。

/* 关键字值 */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;

/* <percentage> 值 */
object-position: 25% 75%;

/* <length> 值 */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;

/* 边缘偏移值 */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;

/* 全局关键字 */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;

对上、下、左、右的理解，可以理解为依次移动设置的偏移量，就是最后的位置了