为替换元素添加样式
有些 CSS 属性适用于所有元素，有些仅适用于网格和弹性容器，还有些仅适用于可变形元素。本指南将介绍仅适用于可替换元素的属性。
可替换元素是其表现形式超出 CSS 范围的元素；它们是外部对象，其表现形式独立于 CSS 格式化模型。某些可替换元素，例如 <iframe> 元素，可能拥有自己的样式表，但它们不会继承父文档的样式。
将 CSS 与可替换元素配合使用
在某些情况下，CSS 会特别处理可替换元素，例如在计算外边距和一些 auto 值时。只有可替换元素才能拥有固有尺寸。某些可替换元素（但不是全部）具有固有尺寸或定义的基线，CSS 属性（例如 vertical-align）会使用这些尺寸或基线。
尽管文档样式可以设置可替换元素的大小和位置，但文档样式不影响可替换元素的内容，但也有一些例外：CSS 图像模块包含支持控制元素内容在其框内定位的属性。
控制内容框中对象的位置
CSS 图像模块定义了两个属性，可用于指定可替换元素中包含的对象应如何在其元素框区域内定位。object-fit 属性用于调整对象大小，而 object-position 属性用于定位对象。
object-fit 属性
object-fit 属性指定可替换元素的内容对象应如何适应包含元素的框。该属性定义图像、视频和其他可嵌入媒体格式如何响应可替换元素内容框的高度和宽度。如果元素的高度、宽度或宽高比与将占用为该元素保留空间的资源不同，fill、contain、cover、scale-down 和 none 值定义浏览器应缩放资源、覆盖分配的空间、将资产包含在空间内，还是允许资源变形。
当内容被包含或缩小后，框中未被可替换元素覆盖的任何区域将显示元素的背景。
object-fit 属性对 <iframe>、<embed> 和 <fencedframe> 元素没有影响。
如果我们将一张宽高比为 1:1 的正方形图像放入一个 100px x 300px（宽高比为 1:3）的框中，默认情况下，图像将填充该框并自身扭曲。我们可以使用 object-fit 属性来定义当图像被强制放入不同大小和宽高比的框中时，它应该如何渲染。
img:nth-of-type(1) {
object-fit: fill;
}
img:nth-of-type(2) {
object-fit: cover;
}
img:nth-of-type(3) {
object-fit: contain;
}
img:nth-of-type(4) {
object-fit: scale-down;
}
img:nth-of-type(5) {
object-fit: none;
}
img:nth-of-type(6) {
/* no object-fit property */
outline: 2px dashed red;
}
勾选此框可设置高度和宽度值。请注意，只有 fill 值（默认值）会扭曲原始图像。使用所有其他值时，图像的固有宽高比会保持不变。
object-position 属性
object-position 属性指定可替换元素内容对象在元素框内的对齐方式。
它通常与 object-fit 属性结合使用，其值是 <position> 值，与 background-position 中使用的值类型相同。
img {
object-position: bottom right;
}
它可以在不使用 object-fit 的情况下使用。在这种情况下，图像以其固有大小（218px x 218px）渲染，图像内容的位置由 object-position 值设置。
img {
outline: 2px solid;
object-position: 114px 72px;
}
object-position 属性与 <iframe>、<video> 和 <embed> 元素配合使用时与 <img> 元素同样有效。
另见
- 理解纵横比
- CSS 图像模块
- CSS display 模块
- CSS 背景与边框模块