CSS属性：object-fit和object-position属性（常用于img、video元素标签）

本文介绍了CSS中的object-fit和object-position属性。object-fit控制可替换元素（如图片、视频）适应容器的方式，提供fill、contain、cover、none和scale-down五种值，分别对应不同的缩放和填充效果。object-position则用于调整元素内容在容器内的对齐位置，支持关键字、百分比和数值定位。两个属性配合使用可实现精准的响应式布局，但需注意

冲！！

485人浏览 · 2025-09-13 16:11:12

冲！！ · 2025-09-13 16:11:12 发布

1.object-fit属性：

object-fit属性是CSS中用于指定可替换元素（如<img>或<video>）如何适应其容器的高度和宽度的属性。这个属性主要影响元素的内容大小和比例，以确保内容在不同容器尺寸中正确显示。

使用object-fit属性

在CSS中，object-fit属性可以接受以下值：

fill：默认值。内容会拉伸以填满容器，不保证保持原有的比例。

contain：内容会被缩放以保持原始比例，并完全适应容器的内容框，可能会留下空白边缘。

cover：内容保持原始比例，同时填满整个容器，如果内容的比例与容器不匹配，部分内容可能会被剪切。

none：内容将保持其原有的尺寸，不进行缩放或剪切。

scale-down：内容的尺寸会根据none或contain中较小的一个进行缩放。

这些值决定了元素内容的显示方式，例如是否保留长宽比、是否填充整个容器或是否剪切内容。

以下是一些使用object-fit属性的示例代码：

/* 使图片填充整个容器，可能会拉伸图片 */

img.fill {
object-fit: fill;
}


/* 使图片保持比例并完全适应容器 */

img.contain {
object-fit: contain;
}


/* 使图片覆盖整个容器，可能会剪切图片 */

img.cover {
object-fit: cover;
}


/* 保持图片原始尺寸 */
img.none {
object-fit: none;
}


/* 根据需要缩小图片尺寸 */

img.scale-down {
object-fit: scale-down;
}

注意事项

此外，object-fit属性不是一个继承属性，它需要直接应用于目标元素。在使用时，还可以结合object-position属性来调整内容在容器内的对齐方式，以达到更精确的布局效果。

兼容性

object-fit属性在现代浏览器中得到了广泛支持，包括Chrome、Firefox、Safari和Opera等。使用时需要注意，旧版浏览器可能不支持此属性，因此在开发时应考虑到兼容性问题或提供回退方案。

2.object-position属性

object-position 是一个 CSS 属性，用于指定可替换元素（如 <img> 或 <video>）的内容在其内容框中的对齐方式。这个属性可以帮助我们控制图像或视频在其容器中的显示位置。

语法和用法

object-position 属性可以接受多个值，包括关键字、百分比和长度值。以下是一些常见的用法示例：

/* 关键字值 */

object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;


/* 百分比值 */

object-position: 25% 75%;


/* 长度值 */

object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;


/* 边缘偏移值 */

object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;


/* 全局关键字 */

object-position: inherit;
object-position: initial;
object-position: revert;
object-position: unset;

示例

以下示例展示了如何使用 object-position 属性来调整图像在其容器中的位置：

<!doctype html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Object Position Example</title>

    <style>
      img {
        width: 300px;

        height: 250px;

        border: 1px solid black;

        background-color: silver;

        margin-right: 1em;

        object-fit: none;
      }

      #object-position-1 {
        object-position: 10px;
      }

      #object-position-2 {
        object-position: 100% 10%;
      }
    </style>
  </head>

  <body>
    <img id="object-position-1" src="mdn.svg" alt="MDN Logo" />

    <img id="object-position-2" src="mdn.svg" alt="MDN Logo" />
  </body>
</html>

在这个示例中，第一个图像的左边缘距元素框左边缘 10 个像素。第二个图像的右边缘与元素框的右边缘齐平，并位于元素框高度下方 10% 处。

重要考虑事项

初始值：50% 50%

适用元素：替换元素

是否继承：是

百分比：相对于元素自身的宽度和高度

计算值：按指定值计算

通过使用 object-position 属性，我们可以更精确地控制图像或视频在其容器中的显示位置，从而实现更好的视觉效果和用户体验