一、可替换元素是什么？
可替换元素指的是其展现的效果和内容是不受到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;
对上、下、左、右的理解，可以理解为依次移动设置的偏移量，就是最后的位置了
