如何使用 CSS object-fit 等比缩放和裁剪图像
你可能会遇到在处理图像时希望保留原始纵横比的情况。保持纵横比可以防止图像因被拉伸或挤压而出现扭曲。此问题的常见解决方案是使用background-image CSS 属性。更现代的方法是使用object-fit CSS 属性。
在本文中，我们将探索 object-fit 各个属性值的效果，了解 fill、cover、contain、none、scale-down 是如何缩放和裁剪图像的。我们还将探索 object-position CSS 属性以及它如何偏移图像。
示例图像默认效果
我们将用下面代码显示示例图像：
<img src=”1.jpg”
width=”500″
height=”280″
style=”width: 500px; height: 280px;”
alt=”图像缩放到 500 x 280″
>
此代码将在浏览器中产生以下结果：
此图像的原始宽度为 1000 像素，高度为 560 像素。使用img属性，宽度设置为原始尺寸的一半 500，高度也设为原始尺寸的一半 280 ，以保留纵横比。
现在，布局图像占据 250px 宽度和 280px 高度的情况：
<div style=”width:500px; height:280px; text-align: center; margin-bottom: 0.5em; margin-top: 0.5em; background:#ccc; border:1px solid #999999;”>
<img src=”1.jpg”
width=”500″
height=”280″
style=”width: 250px; height: 280px”
alt=”图像缩放到 250 x 280。”>
</div>
此代码将在浏览器中产生以下结果：
生成的图像不再保留原始纵横比，并且在视觉上似乎“被挤压”了。
使用object-fit: fill
该fill值是object-fit的初始值，此值不会保留原始纵横比。
<img
…
style=”width: 250px; height: 280px; object-fit: fill;“
…
/>
此代码将在浏览器中产生以下结果：
由于这是浏览器渲染引擎的“初始”值，因此缩放图像的外观没有变化，生成的图像仍然显得被压扁。
使用object-fit: cover
该cover值保留原始纵横比，但图像占用所有可用空间。
<img
…
style=”width: 250px; height: 280px; object-fit: cover;“
…
/>
此代码将在浏览器中产生以下结果：
在某些情况下，object-fit: cover会导致图像出现裁剪。在此示例图像中，左侧和右侧的原始图像的某些部分不会出现，因为它们无法容纳在声明的宽度范围内。
使用object-fit: contain
该contain值保留原始纵横比，但图像也被限制为不超过可用空间的范围。
<img
…
style=”width: 250px; height: 280px; object-fit: contain;“
…
/>
此代码将在浏览器中产生以下结果：
在某些情况下，object-fit: contain会导致图像没有填满所有可用空间。在此示例图像中，图像上方和下方都有垂直空间，因为声明的高度高于按比例缩小的高度。
使用object-fit: none
该none值根本不会调整图像大小。
<img
…
style=”width: 250px; height: 280px; object-fit: none;“
…
/>
此代码将在浏览器中产生以下结果：
在图像大于可用空间的情况下，它会出现裁剪。在此示例图像中，左侧、右侧、顶部和底部的原始图像的某些部分不会出现，因为它们无法容纳在声明的宽度和高度范围内。
使用object-fit: scale-down
该scale-down值将显示类似图像contain或none取决于哪个会导致较小的图像。
<img
…
style=”width: 250px; height: 280px; object-fit: scale-down;“
…
/>
此代码将在浏览器中产生以下结果：
在此示例图像中，图像已按比例缩小以表现得像contain。
使用object-fit和object-position
如果从中生成的图像object-fit出现裁剪，则默认情况下图像将居中显示。该object-position属性可用于更改焦点。
考虑object-fit: cover之前的例子：
现在让我们改变图像可见部分在 X 轴上的位置，以显示图像的最右边：
<img
…
style=”width: 250px; height: 280px; object-fit: cover; object-position: 100% 0;“
…
/>
此代码将在浏览器中产生以下结果：
在此示例图像中，以图像的最右边为基准进行裁剪，跟前面使用cover不同了。
最后，让我们观察一下如果指定的位置超出了可用空间的范围会发生什么：
<img
…
style=”width: 250px; height: 280px; object-fit: cover; object-position: -20% 0;“
…
/>
此代码将在浏览器中产生以下结果：
在此示例图像中，是以图像的左侧为基准进行裁剪。也有间距来弥补图像左侧偏移的 20%。
结论
在本文中，介绍了object-fit和object-position的CSS属性值，它们很好地对图像进行缩放显示，保持纵横比防止图像因被拉伸或挤压而出现扭曲。
