CSS 的object-position属性

object-position CSS 属性用于指定一个替换元素（如 <img> 或 <video>）的内容在其使用的盒子（即容器）内的对齐方式。这个属性与 object-fit 属性一起工作，object-fit 控制了元素内容如何适应其容器的大小，而 object-position 则决定了内容在容器内的具体位置和裁剪方式（当 object-fit 设置为 cover 或 contain 时）。

语法

object-position: <position> /* 可以是关键词、百分比或长度值 */

• <position> 可以是一个或多个值，用于指定水平（第一个值）和垂直（第二个值，可选）位置。如果省略了垂直位置，它将默认为 50%（即居中）。

可用值

• 关键字：top、right、bottom、left、center。这些关键字可以单独使用或组合使用，如 top left、center。
• 百分比：如 25% 75%，表示内容的左上角位于容器左上角向右 25% 和向下 75% 的位置。
• 长度值：如 10px 20px，表示内容的左上角距离容器左上角右侧 10px 和下方 20px 的位置。

示例

假设你有一张图片，你想要在一个固定大小的容器内显示它，并且你想要控制图片的具体显示区域。

HTML:

<div class="image-container">
  <img src="example.jpg" alt="示例图片">
</div>

CSS:

.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden; /* 隐藏被裁剪的部分 */
  position: relative; /* 通常是可选的，但在这里为了示例清晰 */
}

.image-container img {
  width: 100%; /* 使图片的宽度充满容器 */
  height: auto; /* 保持图片的原始宽高比 */
  object-fit: cover; /* 裁剪图片以填满容器 */
  object-position: 50% 25%; /* 将图片的中心点对齐到容器的中心点向下 25% 的位置 */
}

然而，请注意，在这个例子中，width: 100%; 和 height: auto; 实际上与 object-fit 一起使用时可能不会产生预期的效果，因为 object-fit 会覆盖图片的默认尺寸调整行为。更常见的做法是让图片保持其自然尺寸，并通过容器的大小和 object-fit/object-position 来控制显示。但在本例中，为了说明 object-position 的用法，我们保留了这些属性。

实际上，如果你想要完全通过 object-fit 和 object-position 来控制图片的显示，你可能需要设置图片的 width 和 height 为与容器相同（或按比例缩放），或者使用 max-width: 100%; 和 max-height: 100%; 来允许图片在保持其宽高比的同时不超过容器的大小。然后，object-fit 和 object-position 将决定如何裁剪或缩放图片以适应这个尺寸限制。