object-fit 这个 CSS 样式，是针对可替换元素（replaced element）设计的。一般来说，常见的可替换元素包含图片（img）或是视频（video）。这些可替换元素的大小是事先不确定的，在实际展示的时候，需要一定的规则来决定元素实际如何被放置到元素框中去。
以下是几种 object-fit 的值及对应的显示效果（每种类型显示两个图片，第一张图片的原始尺寸大于元素显示的尺寸，第二张图片的原始尺寸小于元素显示的尺寸）：
fill
- 宽高比例：不保持
- 显示范围：占满元素
- 可能影响：显示结果宽高比失真；显示结果比原始尺寸大
contain
- 宽高比例：保持
- 显示范围：至少一轴占满，整体（另一轴）不超过元素
- 可能影响：出现黑边（letterboxed）；显示结果比原始尺寸大
cover
- 宽高比例：保持
- 显示范围：至少一轴占满，整体（另一轴）可以超过元素
- 可能影响：超出显示范围；显示结果比原始尺寸大
none
- 宽高比例：保持
- 显示范围：原始尺寸
- 可能影响：超出显示范围
scale-down
使用 none 或者 contain 的规则进行显示。具体选择哪个规则，要看两个规则生成的最终效果，哪一个更小。换句话说，如果元素的原始尺寸两轴都小于元素的显示范围，就使用 none 进行显示，显示结果是原始元素的原始尺寸；否则就是用 contain 的方式进行显示，用黑边的方式将元素压缩到显示范围内完整显示。