【CSS】object-fit 和 object-position 属性详解

object-fit和object-position是CSS属性，用于控制图像或视频在其容器中的适应和定位方式。

object-fit属性

属性值：

1. fill：默认值。替换元素的内容将被拉伸以填充元素的内容框。这可能会导致内容的长宽比发生变化。
2. contain：替换元素的内容将被缩放以适应元素的内容框，同时保持其长宽比。这可能会导致内容框的某些部分没有被替换元素的内容覆盖。
3. cover：替换元素的内容将被缩放以完全覆盖元素的内容框，同时保持其长宽比。这可能会导致内容的一部分在元素的内容框外不可见。
4. none：替换元素的内容不会被缩放，它将被裁剪以适应元素的内容框。
5. scale-down：此值的效果等同于none或contain，取决于哪个会导致更小的对象尺寸。

使用场景：

object-fit属性通常用于确保图像或视频在其容器中保持正确的长宽比，避免拉伸或压缩导致的失真。例如，在一个固定大小的容器中展示一个图像时，可以使用object-fit属性来确保图像以最佳方式显示。

object-position 属性

object-position属性用于指定替换元素（如或）的内容在其容器内的位置。通过指定水平和垂直方向的偏移量，可以轻松地调整元素内容在容器内的起始点，实现精准定位。

语法：

object-position属性接受两个值，分别表示水平方向和垂直方向的偏移量。这两个值可以是长度单位（如像素、百分比等），也可以是关键词（如left、right、top、bottom、center）。

例如：

object-position: 50% 50%; 表示将元素内容在容器内水平和垂直方向上都居中显示。
object-position: right top; 表示将元素内容的右上角与容器的右上角对齐。

object-position: 50% 50%：将图像或视频的中心点放置在容器的中心点，默认值。
object-position: top left：将图像或视频的左上角放置在容器的左上角。
object-position: bottom right：将图像或视频的右下角放置在容器的右下角。
object-position: center：将图像或视频的中心点放置在容器的中心点。
object-position: left：将图像或视频的左侧边缘放置在容器的左侧边缘。
object-position: top：将图像或视频的顶部边缘放置在容器的顶部边缘。
object-position: right：将图像或视频的右侧边缘放置在容器的右侧边缘。
object-position: bottom：将图像或视频的底部边缘放置在容器的底部边缘。
object-position: [x-offset] [y-offset]：通过指定偏移量来自定义图像或视频的定位位置，例如object-position: 20% 50%表示将图像或视频的左上角向右偏移20%的容器宽度，向下偏移50%的容器高度。

使用场景：

object-position属性通常与object-fit属性一起使用，以实现更复杂的布局效果。例如，在一个固定大小的容器中展示一个图像，并希望图像以特定的方式显示（如居中、顶部对齐等），可以使用object-fit和object-position属性来共同实现。