object-fit是 CSS 中用于控制替换元素（如 <img>、<video> 等）内容如何适应其容器框的属性。它允许你指定元素的内容是否应该被缩放以适应其包含块，以及在需要时如何进行裁剪或对齐。
object-fit 的值
| 属性 | 描述 |
|---|---|
| fill | 这是默认行为，表示内容将拉伸以填充整个容器框，可能会导致内容的宽高比失真。 |
| contain | 内容将保持其原始比例，并调整大小以适合容器。如果内容和容器的比例不同，则会在容器内留出空白区域。 |
| cover | 内容将保持其原始比例，并调整大小以覆盖整个容器。这可能导致部分内容被裁剪掉，但保证了不会出现空白区域。 |
| none | 内容不会被缩放，而是按照其原始尺寸显示。如果内容的尺寸与容器不匹配，那么内容可能会溢出容器或者在容器内留下空白区域。 |
| scale-down | 这个值会选择 none 或 contain 中更小的那个结果来应用。换句话说，它会尽可能缩小内容以确保内容完全可见，同时保持其宽高比不变。 |
浏览器支持
现代浏览器普遍支持 object-fit 属性，但在较老版本的 Internet Explorer 中并不受支持。因此，在开发时需要注意目标用户的浏览器环境，并考虑提供适当的回退方案。
