介绍
您可能会遇到在处理图像时希望保留原始纵横比的情况。 保持纵横比可以防止图像因被拉伸或挤压而出现扭曲。 此问题的常见解决方案是使用 background-image CSS 属性。 更现代的方法是使用 object-fit CSS 属性。
在本文中，您将探索可用于object-fit CSS 属性以及它如何裁剪和缩放图像。 您还将探索 object-position CSS 属性以及它如何偏移图像。
先决条件
如果您想继续阅读本文，您将需要：
观察样本图像的默认行为
考虑以下用于显示示例图像的代码：
<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 主题页面 以获取练习和编程项目。
