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

原文链接：Cropping Images in CSS With object-fit

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

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

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

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

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

object-fit: contain

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

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

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

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

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

现在，假设图片已经按照我们的 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;
}

（正文完）

广告时间（长期有效）

我有一位好朋友开了一间猫舍，在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个爱猫人士并且有需要的话，不妨扫一扫她的【闲鱼】二维码。不买也不要紧，看看也行。

（完）