用 CSS Object-Fit 属性，打开图片裁剪的新大门

CSS object-fit 属性简介

CSS object-fit 属性用于定义图像如何在其父容器中显示。该属性有五个可能的值：

• contain ：保持图片原始的长宽比，调整图片尺寸，使高度或宽度（两者中较长的一个）能够适应给定的尺寸。
• cover ：保持图片原始的长宽比，图像区域完全被图片完全覆盖。
• fill ：默认值。图片完全填充于图像区域，即使付出会损失原始长宽比的代价。
• none ：图片尺寸不会被调整。原图显示，不裁剪。
• scale-down ：保持图片原始的长宽比，调整图片尺寸，使高度或宽度（两者中较长的一个）都不能适应给定的尺寸。

如何使用 CSS object-fit 属性

要使用 CSS object-fit 属性，您需要将该属性添加到图像的父容器中。例如：

<div style="width: 200px; height: 100px;">
  <img src="image.jpg" style="object-fit: contain;">
</div>

在这个示例中，图像的父容器是一个 div 元素，宽度为 200px，高度为 100px。图像的 object-fit 属性设置为 contain，这意味着图像将保持其原始的长宽比，并调整其大小，使高度或宽度（两者中较长的一个）能够适应给定的尺寸。

object-fit 属性的示例

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

• 示例 1：保持原始长宽比

<div style="width: 200px; height: 100px;">
  <img src="image.jpg" style="object-fit: contain;">
</div>

在这个示例中，图像将保持其原始的长宽比，并调整其大小，使高度或宽度（两者中较长的一个）能够适应给定的尺寸。如果图像的原始宽度为 400px，高度为 200px，那么在父容器中，图像的宽度将为 200px，高度将为 100px。

• 示例 2：完全覆盖

<div style="width: 200px; height: 100px;">
  <img src="image.jpg" style="object-fit: cover;">
</div>

在这个示例中，图像将保持其原始的长宽比，并调整其大小，使图像区域完全被图片完全覆盖。如果图像的原始宽度为 400px，高度为 200px，那么在父容器中，图像的宽度将为 200px，高度将为 200px。

• 示例 3：填充

<div style="width: 200px; height: 100px;">
  <img src="image.jpg" style="object-fit: fill;">
</div>

在这个示例中，图片将完全填充于图像区域，即使付出会损失原始长宽比的代价。如果图像的原始宽度为 400px，高度为 200px，那么在父容器中，图像的宽度将为 200px，高度将为 100px。

结论

CSS object-fit 属性是一个强大的工具，可以轻松裁剪图像，并保持原始长宽比。该属性有五个可能的值：contain、cover、fill、none 和 scale-down。您可以根据需要选择合适的值，以达到不同的效果。