使用 CSS object-fit 属性裁剪图片

使用 CSS object-fit 属性裁剪图片

 

曾经是否想要一张图片精确地适配某个尺寸大小、但同时还要保持它的长宽比、避免出现图片被压扁的情况？在很长一段时间内，使用 CSS 很难做到这一点。但现在 object-fit 属性就能解决这个问题了！

除了 inherit、initial 和 unset 这三个值，object-fit 还有另外 5 个可能的取值：

• contain：保持图片原始的长宽比，调整图片尺寸，使高度或宽度（两者中较长的一个）能够适应给定的尺寸。
• cover：保持图片原始的长宽比，图像区域完全被图片完全覆盖。
• fill：默认值。图片完全填充于图像区域，即使付出会损失原始长宽比的代价。
• none：图片尺寸不会被调整。原始图片大小直接铺在图像区域。
• scale-down：在取值 contain、none 情况下，较小的那个。

下面有一张图片， 它的原始尺寸是：宽 1200px，高 674px。 我们设置成一半大小显示，即 600px * 337px。

 

如果在不改变高度的情况下，将宽度再设置为 300px。那么图片原始的长宽比改变了，图片表现为被纵向压扁了：

 

使用 object-fit 就可以解决这个问题。我们来看看。

object-fit: contain

 

由上图可见，整张图片被完整的包含在（contain）在图像区域了。

object-fit: none

 

因为图片的原始尺寸大于图像区域，因此这里仅显示了原始图片的中间部分。

object-fit: cover

 

“cover”这个单词是“封面”的意思。看上面的 object-fit: cover 的最终呈现效果：整个图片的高是完全呈现的，对应的宽（保持原始长宽比的情况下）则不能完全显示，只显示了中间的部分。也就是说，所谓的封面效果，就是先保证图片的宽、高里较小的那一方先完全呈现，另外一方则截取呈现。

object-fit: fill

 

object-fit: scale-down

 

对比取值 contain、none 下的效果，取值 contain 的时候，图片渲染尺寸更小，因此 object-fit: scale-down 的呈现效果与 object-fit: contain 一致。

这些例子里，object-fit: cover 是最符合我们预期的。

object-position

现在，假设图片已经按照我们的 object-fit 设置进行裁剪了，但图片的显示位置不是你想要的，这时候，就可以使用object-position 属性来精确控制图片显示区域。

我们以 object-fit: cover 为例：

.alligator-turtle {
  object-fit: cover;

  width: 300px;
  height: 337px;
}
复制代码

 

现在，我们修改图像可见部分在 X 轴上的位置，这样我们就可以看到图像的最右边了：

.alligator-turtle {
  object-fit: cover;
  object-position: 100% 0;

  width: 300px;
  height: 337px;
}
复制代码

 

译者注：object-position 属性的默认值是 50% 50%，这就是上面看到的裁剪图片居中显示的原因所在。

最后，来看下如果提供的是一个超出边界的值结果如何：

.alligator-turtle {
  object-fit: cover;
  object-position: -20% 0;

  width: 300px;
  height: 337px;
}
复制代码

 

兼容性

 

（正文完）