是否曾经想要将图片完全适合某些给定的尺寸，但又要保持其长宽比和避免图片变型？在很长一段时间，用CSS很难做到这一点。有一种技巧是使用背景图片来解决问题。有了object-fit属性，这些不再是问题。

除了inherit, initial和unset之外，object-fit还有5个可能的值：

  • contain: 图片保持其原始长宽比，但会调整大小，以使高度或宽度中的最长者可以适合给定的尺寸。
  • cover: 图片保持其原始长宽比，并且图片区域被完全覆盖。
  • fill: 初始值。图片将填充其给定的区域，即使这会失去原始的长宽比。
  • none: 图片不会调整大小，原始图片尺寸会填充给定的区域。
  • scale-down: contain或者none中的较小者。

让我们用一个例子来演示。下面这张图的原始宽度为1200px，高度为674px。这里显示的是其尺寸的一半，即600px x 337px：
1.png

现在，如果我们需要图片具有相同的高度，但是宽度改为原来的一半，就会遇到问题。
原始的宽高比将丢失，结果是一个压缩后的图片：
2.png

object-fit可以为我们解决这个问题。让我们展示一下不同的值：
示例中.alligator-turtle的公共样式为：

  1. img.alligator-turtle {
  2.   width: 300px;
  3.   height: 337px;
  4.   box-shadow: 0 0 6px rgba(0, 0, 0, .1);
  5.   border-radius: 3px;
  6. }

object-fit: contain

.alligator-turtle {
  object-fit: contain;
}

3.png

object-fit: cover

.alligator-turtle {
  object-fit: cover;
}

4.png

object-fit: fill

.alligator-turtle {
  object-fit: fill;
}

    ![5.png](https://cdn.nlark.com/yuque/0/2019/png/536194/1572575902734-0d903edc-9db7-4460-8cd5-ee6bf730e762.png "5.png")


object-fit: none

.alligator-turtle {
  object-fit: none;
}

    ![6.png](https://cdn.nlark.com/yuque/0/2019/png/536194/1572575933394-a9a55b5d-7e89-4515-866a-cb8bbe5b2448.png "6.png")


object-fit: scale-down

.alligator-turtle {
  object-fit: scale-down;
}

    ![7.png](https://cdn.nlark.com/yuque/0/2019/png/536194/1572575982332-d173ce6a-befc-467d-95b4-de9af3c77b64.png "7.png")


在这个特定的示例中，object-fit：cover可能是最符合我们需要的值。

object-position

现在，你的图片经过了object-fit的裁剪，但是图片显示的部分并不在你希望的位置。你可以使用object-position属性进行精确控制。
让我们从object-fit: cover示例开始:

.alligator-turtle {
  object-fit: cover;

  width: 300px;
  height: 337px;
}

8.png

现在，让我们更改图片可见部分在X轴上的位置，以便我们看到图片的最右边：

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

  width: 300px;
  height: 337px;
}

9.png

最后，如果你提供了一个超出范围的位置，将会发生以下情况：

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

  width: 300px;
  height: 337px;
}

10.png

浏览器支持

QQ截图20191101104427.png

原文地址：Cropping Images in CSS With object-fit