如何使用CSSobject-fit缩放和裁剪图像

介绍

您可能会遇到在处理图像时希望保留原始纵横比的情况。 保持纵横比可以防止图像因被拉伸或挤压而出现扭曲。 此问题的常见解决方案是使用 background-image CSS 属性。 更现代的方法是使用 object-fit CSS 属性。

在本文中，您将探索可用于object-fit CSS 属性以及它如何裁剪和缩放图像。 您还将探索 object-position CSS 属性以及它如何偏移图像。

先决条件

如果您想继续阅读本文，您将需要：

• 了解 CSS 属性和值。
• 使用与样式属性 内联的 CSS 声明。
• 一个代码编辑器。
• 支持 [X35X] 和 object-position 的现代网络浏览器。

观察样本图像的默认行为

考虑以下用于显示示例图像的代码：

<img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 600px; height: 337px;"
  alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 600 x 337."
/>

此代码将在浏览器中产生以下结果：

此图像的原始宽度为 1200 像素，高度为 674 像素。 使用 img 属性，宽度已设置为 600 和 337 - 原始尺寸的一半 - 保留纵横比。

现在，考虑布局期望图像占据 300px 宽度和 337px 高度的情况：

<img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 300px; height: 337px;"
  alt="Sample image of a tutle riding on top of an alligator that is swimming in the water - scaled to 300 x 337."
/>

此代码将在浏览器中产生以下结果：

生成的图像不再保留原始纵横比，并且在视觉上似乎“被挤压”了。

使用 object-fit: fill

fill 值是 object-fit 的初始值。 此值不会保留原始纵横比。

<img
  ...
  style="width: 300px; height: 337px; object-fit: fill;"
  ...
/>

此代码将在浏览器中产生以下结果：

由于这是浏览器渲染引擎的“初始”值，因此缩放图像的外观没有变化。 生成的图像仍然显得被压扁。

使用 object-fit: cover

cover 值保留原始纵横比，但图像占用所有可用空间。

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover;"
  ...
/>

此代码将在浏览器中产生以下结果：

在某些情况下，object-fit: cover 会导致图像出现裁剪。 在此示例图像中，左侧和右侧的原始图像的某些部分不会出现，因为它们无法容纳在声明的宽度范围内。

使用 object-fit: contain

contain 值保留原始纵横比，但图像也被限制为不超过可用空间的界限。

<img
  ...
  style="width: 300px; height: 337px; object-fit: contain;"
  ...
/>

此代码将在浏览器中产生以下结果：

在某些情况下，object-fit: contain 将导致图像没有填满所有可用空间。 在此示例图像中，图像上方和下方都有垂直空间，因为声明的高度高于按比例缩小的高度。

使用 object-fit: none

none 值根本不会调整图像大小。

<img
  ...
  style="width: 300px; height: 337px; object-fit: none;"
  ...
/>

此代码将在浏览器中产生以下结果：

在图像大于可用空间的情况下，它会出现裁剪。 在此示例图像中，左侧、右侧、顶部和底部的原始图像的某些部分不会出现，因为它们无法容纳在声明的宽度和高度范围内。

使用 object-fit: scale-down

scale-down 值将显示类似 contain 或 none 的图像，具体取决于哪个会产生更小的图像。

<img
  ...
  style="width: 300px; height: 337px; object-fit: scale-down;"
  ...
/>

此代码将在浏览器中产生以下结果：

在此示例图像中，图像已按比例缩小以表现得类似于 contain。

使用 object-fit 和 object-position

如果从 object-fit 生成的图像出现裁剪，默认情况下图像将居中显示。 object-position 属性可用于更改焦点。

考虑之前的 object-fit: cover 示例：

现在让我们改变图像可见部分在 X 轴上的位置，以显示图像的最右边：

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover; object-position: 100% 0;"
  ...
/>

此代码将在浏览器中产生以下结果：

在此示例图像中，乌龟已从图像中裁剪出来。

最后，让我们观察一下如果指定的位置超出了可用空间的范围会发生什么：

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover; object-position: -20% 0;"
  ...
/>

此代码将在浏览器中产生以下结果：

在此示例图像中，乌龟和鳄鱼头已从图像中裁剪出来。 还有一个间距来弥补图像左侧的 20% of 偏移。

结论

在本文中，您探索了 object-fit 和 object-position CSS 属性的可用值。

object-fit 还支持 inherit、initial 和 unset。

在您的项目中使用 object-fit 之前，请通过查看 Can I Use? 上的 浏览器支持来验证您的目标受众使用的浏览器是否支持它。

如果您想了解有关 CSS 的更多信息，请查看 我们的 CSS 主题页面 以获取练习和编程项目。