Справочник · CSS

object-position: какую часть картинки оставить видимой

Когда object-fit обрезает снимок, object-position выбирает, какая точка останется в кадре.

Как это работает

По умолчанию это центр. Для портрета часто нужен верх, иначе кадр отрежет лицо. Значения похожи на background-position: left, top, 50% 20%. Свойство работает вместе с object-fit: cover у заменённого элемента, обычно img или video. Само по себе оно не кадрирует, если картинка и так влезает целиком.

img.cover {
  width: 100%;
  height: 14rem;
  object-fit: cover;
  object-position: center top;
}

Когда использовать

Обложка карточки и аватар. Обычную иллюстрацию в тексте не обрезай.

Частые ошибки

• Лицо уехало за край при cover.
• Свойство задали без object-fit и ждали обрезку.
• Важная деталь снимка каждый раз в другом углу из-за случайных процентов.