Что такое `object-fit` и `object-position`?

Для replaced-элементов

Свойства управляют, как <img>, <video>, <canvas> заполняют свой бокс (при заданных width/height):

• object-fit: cover — кадрирует, заполняя бокс;
• contain — целиком видно, возможны поля;
• fill — растягивает (по умолчанию во многих случаях);
• none / scale-down.

object-position — якорь кадра, как background-position (center, top right, 20% 30%).

.avatar {
  width: 96px;
  height: 96px;
  object-fit: cover;
  object-position: top;
}

Не путать с background-size у декоративных фонов: object-* работает с содержимым тега.