我通常用background-size 和 background-position属性来控制背景图片的大小和位置，而object-fit和object-position属性则是我们对嵌入的图片（或者是视屏等）做类似的操作。

一、object-fit属性

1、object-fit:cover 是强制图片完全覆盖容器的区域，尽可能多的现实图片，而不会扭曲它

img{
  width:"100%;
  height:100%;
  object-fit:cover;
}

cover的值是确保图片的较窄部分完全填充到容器里。

2、object-fit:contain

contain 值强制图像完全适应其内容框，但不会扭曲。图像保持其自然的宽高比，因此不会填满其容器

img {
  width: 100%;
  height: 100%;
  object-fit: contain;

3、object-fit:none;

none 属性允许图像保持其自然的原始尺寸。只有可以适应调整后的内容框的部分才是可见的。与object-fit: cover不同，我们的图像不会被强制在至少一个轴上完全可见。原始图像的宽度和高度都大于内容框，所以它在两个方向上都溢出，如下图所示。none 值保持图像的正常大小，因此在容器中看不到图像的顶部、底部和两侧。

4、object-fit：scale-down

cale-down 属性与 none 或 contain 相同。它选择使图像显示得更小的那个

5、object-fit:fill

默认情况下，图像无论设置了什么尺寸都会填充其内容框。

二、object-position 设置图像的位置

object-position 默认为 50% 50%，这意味着图像的中心与其内容框的中心对齐。我们可以使用一系列的关键字值（如 top、bottom、left、right、center）或使用长度值（如px、em或%）或两者的组合来更改这一点

.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom; /* or 100% 100% */
}

.img2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20px 2em; /* 20px from left and 2em from top */
}

.img2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right 20px bottom 2em; /* 20px from right and 2em from bottom */
}