object-fit 属性的含义及应用场景

object-fit 是一个 CSS 属性，用于指定图片或视频等替换元素在其容器中的显示方式。

该属性有以下几个取值可选：

• fill：默认值，将图片按比例缩放填充整个容器，可能会裁剪部分内容。
• contain：保持原始比例缩放图片，使得完整的图片能够完全显示在容器内，可能会留有空白区域。
• cover：保持原始比例缩放图片，使得图片完全覆盖容器，可能会超出容器范围，部分内容可能被裁剪。
• none：保持原始尺寸显示图片，不进行任何缩放。
• scale-down：根据实际情况选择 none 或 contain，即如果图片本身尺寸小于容器尺寸，则显示原始尺寸图片，否则按照 contain 的方式进行缩放。

object-fit 属性通常应用于替换元素（<img>、<video> 等）的样式设置中，用于控制其在容器中的显示方式。例如可以通过 object-fit: cover 将一个图片自适应地铺满其容器：

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

以上代码将一个宽高比与容器不同的图片，自动缩放并裁剪，使得其完全覆盖容器，并保持比例不变。