html - CSS: 可以 object-fit:cover，有一个起始位置

Question

我正在使用

object-fit: cover;

为了让图像填充固定大小的 div，像这样

.home img {
    object-fit: cover;
    width: 650px;
    height: 300px;
}

但是，图像四周被均匀裁剪，因为我在图像的右下角有文字，所以我想从左侧和顶部裁剪封面。

这可能吗？

我尝试了所有的对象匹配方法和对象定位方法，但没有一个能提供所需的行为。

Answer 1

在这种情况下，您可以将对象位置添加到img，右下。

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  /* added */
  object-position: bottom right;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" />