如何使用 CSS object-fit 等比缩放和裁剪图像

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

在本文中,我们将探索 object-fit 各个属性值的效果,了解 fillcovercontainnone、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值将显示类似图像containnone取决于哪个会导致较小的图像。

<img
  …
  style=”width: 250px; height: 280px; object-fit: scale-down;
  …
/>

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

 

在此示例图像中,图像已按比例缩小以表现得像contain

使用object-fitobject-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-fitobject-position的CSS属性值,它们很好地对图像进行缩放显示,保持纵横比防止图像因被拉伸或挤压而出现扭曲。