浅谈CSS中的 object-fit 与 object-position 的使用

什么是 object-fit 和 object-position？

object-fit 属性用于控制如何调整一个元素所显示的图片或视频的尺寸比例。默认情况下，一个图片或视频会按照原始的尺寸比例在容器中缩放以适应容器的大小，但在某些情况下，我们需要按照特定的方式裁剪、缩放图片或视频，此时 object-fit 就派上用场了。

object-fit 属性可用的值包括：

• fill（默认）：让图片或视频元素充满容器，引起元素的缩放以填满容器。
• contain：按比例缩放以部分覆盖容器，可能会导致图片或视频元素在容器内有空白区域。
• cover：按比例缩放以部分覆盖容器，并且保证容器内没有空白区域。
• none：使用原始尺寸，并在元素内居中。
• scale-down：按比例缩放元素，但不允许所缩放的元素大于其默认大小。

object-position 属性用于控制元素所显示图片的起始位置，即在元素内沿着垂直和水平方向上各移动多少像素，以便显示最合适的部分。

object-fit 的使用

下面是 object-fit 的两个示例：

示例一：将图片裁剪为圆形

<div class="avatar">
  <img src="avatar.png" alt="头像">
</div>

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

在上面的示例中，我们使用了一个 div 元素来作为头像区域，将其设置为圆形，并使用了 overflow: hidden; 属性以便超出圆形区域的部分被裁剪掉。接着，我们将图片的宽度和高度都设置为 100%，然后使用 object-fit: cover; 属性，让图片元素自动按比例缩放并覆盖整个圆形容器。

示例二：使用不同的尺寸裁剪图片

<img src="image.jpg" alt="图片">

img.cover {
  width: 400px;
  height: 300px;
  object-fit: cover;
}
img.contain {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

在上面的示例中，我们将同一个图片元素使用了两种不同的 object-fit 属性。通过设置不同的宽度和高度，我们可以看到当 object-fit 属性值为 cover 时，图片会按比例缩放并覆盖整个容器；而当 object-fit 属性值为 contain 时，图片会按比例缩放但不会超出容器。

object-position 的使用

下面是 object-position 的一个示例：

示例三：控制图片显示的位置

<img src="image.jpg" alt="图片" class="myimage">

.myimage {
  width: 300px;
  height: 200px;
  object-fit: cover;
  object-position: 50% 50%;
}

在上面的示例中，我们使用了 object-position: 50% 50%; 属性，将图片元素在水平和垂直方向上的位置分别设置为了居中。当 object-fit 属性值为 cover 时，图片会按比例缩放并覆盖整个容器，同时通过 object-position 属性将图片位置居中显示。

总结

object-fit 和 object-position 属性能够让我们更方便的调整图片或视频元素在容器中的尺寸比例和位置，从而实现更好的视觉效果。它们的兼容性也较好，大多数现代浏览器都支持。