简介

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

在本文中，您将探索可用于Object-Fit‘css属性的ful、cover、contain、non’和scaledown值的效果，以及它如何裁剪和缩放图像。您还将探索Object-Positioncss属性以及它如何偏移图像。

预约

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

• 了解css属性和values.
• 使用css声明内联`property.
• 代码编辑器。
• 支持对象适配和对象位置的现代Web浏览器。

观察示例图片的默认行为

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

1<img
2  src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/assets/alligator/css/object-fit/example-object-fit.jpg"
3  width="600"
4  height="337"
5  style="width: 600px; height: 337px;"
6  alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 600 x 337."
7/>

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

这张图片的原始宽度为1200px，高度为674px。使用img属性，宽度被设置为600和337--原始尺寸的一半--保持长宽比不变。

现在，考虑一种布局要求图像占据300px的宽度和337px的高度的情况：

1<img
2  src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/assets/alligator/css/object-fit/example-object-fit.jpg"
3  width="600"
4  height="337"
5  style="width: 300px; height: 337px;"
6  alt="Sample image of a tutle riding on top of an alligator that is swimming in the water - scaled to 300 x 337."
7/>

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

生成的图像不再保留原始的纵横比，并且在视觉上看起来是挤压的。

使用object-fit：fill

填充值是Object-fit的初始值。该值不会保留原始纵横比。

1<img
2  ...
3  style="width: 300px; height: 337px; object-fit: fill;"
4  ...
5/>

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

因为这是浏览器渲染引擎的初始值，所以缩放后的图像外观没有变化。生成的图像仍然看起来被挤压。

使用Object-Fit：over

cover值保留了原始的宽高比，但图像占用了所有可用空间。

1<img
2  ...
3  style="width: 300px; height: 337px; object-fit: cover;"
4  ...
5/>

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

在某些情况下，Object-Fit：cover会导致图像被裁剪。在此示例图像中，原始图像左侧和右侧的某些部分不会显示，因为它们无法适应声明的宽度范围。

使用Object-Fit：tain

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

1<img
2  ...
3  style="width: 300px; height: 337px; object-fit: contain;"
4  ...
5/>

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

在某些情况下，Object-Fit：Contain会导致图片不能填满所有可用空间。在此示例图像中，图像上方和下方都有垂直空间，因为声明的高度高于缩小的高度。

使用Object-Fit：noe

non e值根本不会调整图像的大小。

1<img
2  ...
3  style="width: 300px; height: 337px; object-fit: none;"
4  ...
5/>

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

在图像大于可用空间的情况下，它将显示为裁剪。在此示例图像中，原始图像的左侧、右侧、顶部和底部的某些部分不会显示，因为它们无法适应声明的宽度和高度的界限。

使用Object-Fit：Scale-down

Scale-Down值将显示类似于包含或NONe的图像，具体取决于哪一个会导致较小的图像。

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

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

在这个示例图像中，图像已经被缩小，以表现得像包含。

使用对象-适配和对象-位置

如果从Object-Fit‘得到的图像显示为裁剪，则默认情况下图像将居中显示。[object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position)属性可用于更改焦点。

考虑一下前面的Object-fit：over示例：

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

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

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

在此示例图像中，海龟已从图像中被裁剪掉。

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

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

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

在这个示例图像中，海龟和鳄鱼的头被从图像中剪掉了。还有一些间距可以弥补图像左侧20%的偏移量。

结论

在本文中，您探索了Object-Fit‘和Object-Position`css属性的可用值。

Object-Fit还支持Inherit，Initial，unset.

在您的项目中使用Object-Fit之前，请通过选中Browser Support on Can I Use？.)来验证目标受众使用的浏览器是否支持它

如果您想了解更多关于css的内容，请查看我们的css主题页面获取练习和编程项目。