一、什么是object-fit

object-fit 是一种 CSS 属性，它可以控制一个元素（如 img、video 等）在其容器中的大小和位置。 这个属性可以让元素自适应其父容器，不需要软件或脚本的帮助，可以更加方便地将视觉元素嵌入到网站中。

二、object-fit 的值

object-fit 属性有 5 个值：fill、contain、cover、none 和 scale-down。

1. fill

img {
  object-fit: fill;
}

fill 值让元素填充其父容器，不保留其原始高宽比。

2. contain

img {
  object-fit: contain;
}

contain 值保持元素的原始高宽比，缩小元素以适应其父容器，并居中对齐。

3. cover

img {
  object-fit: cover;
}

cover 值保持元素的原始高宽比，裁剪元素以充满其父容器，并居中对齐。

4. none

img {
  object-fit: none;
}

none 值会保持元素的原始高宽比并将其放置在元素的父容器中，但对齐方式和尺寸由开发者自行决定。

5. scale-down

img {
  object-fit: scale-down;
}

如果元素本身的大小小于容器的大小，则 scale-down 将以元素的原始大小为基准，使用 contain 的规则调整大小。

三、搭配 object-position 使用

在处理图像和视频时，object-position 是另一个 CSS 属性，它可以控制被定位元素的位置。该属性可以用来调整元素在其父容器中的位置，而不是默认居中。 object-position 使用像素单位描述元素的水平和垂直位置，如下所示：

img {
  object-fit: cover;
  object-position: top center;
}

这将显示图像的顶部中心，而不是默认的居中。

四、使用示例

下面是一个完整的使用示例，演示了如何将一个元素添加到网页中，并使其在其容器中自适应。

<title>使用object-fit</title>
<style>
  .container {
    width: 400px;
    height: 400px;
    border: 1px solid black;
  }
  .photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
<div class="container">
</div>