介绍

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

在本文中，您将浏览的效果fill，cover，contain，none，并scale-down提供给值object-fitCSS属性以及它如何裁剪和缩放图像。您还将探索object-positionCSS 属性以及它如何偏移图像。

先决条件

如果你想跟随这篇文章，你需要：

• 了解CSS 属性和值。
• 使用与style属性内联的 CSS 声明。
• 一个代码编辑器。
• 支持object-fit和 的现代网络浏览器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%。

结论

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

object-fit还支持继承、初始和未设置。

object-fit在您的项目中使用之前，请通过检查我可以使用上的浏览器支持来验证您的目标受众使用的浏览器是否支持它。.

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