简介

在处理图片时，你可能会遇到需要保持原始宽高比的情况。保持宽高比可以防止图片被拉伸或压缩而出现失真。解决这个问题的常见方法是使用 background-image CSS 属性。更现代的方法是使用 object-fit CSS 属性。

在本文中，你将探索 object-fit CSS 属性中可用的 fill、cover、contain、none 和 scale-down 值的效果，以及它们如何裁剪和缩放图片。你还将探索 object-position CSS 属性以及它如何偏移图片。

先决条件

如果你想跟着本文学习，你需要：

• 了解 CSS 属性和值。
• 在 style 属性中使用 CSS 声明。
• 一个代码编辑器。
• 一个支持 object-fit 和 object-position 的现代网页浏览器。

观察示例图片的默认行为

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

<img
  src="https://img-blog.csdnimg.cn/img_convert/3571e1785cfa8fccd33ff704355aca8a.jpeg"
  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."
/>

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

这张图片的原始宽度为 1200px，高度为 674px。使用 img 属性，宽度被设置为 600，高度被设置为 337 - 保持了宽高比。

现在，考虑一种情况，布局期望图片占据宽度为 300px，高度为 337px：

<img
  src="https://img-blog.csdnimg.cn/img_convert/3571e1785cfa8fccd33ff704355aca8a.jpeg"
  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-position CSS 属性可用的值。

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

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

如果您想了解更多关于 CSS 的知识，请查看我们的 CSS 专题页面，了解练习和编程项目。