CSS · изображения

Свойство object-fit

object-fit определяет, как изображение или видео заполняет заданную область. Оно помогает сделать карточки одинаковыми, не растягивая фотографию по ширине или высоте.

Режим cover

cover заполняет всю рамку с сохранением пропорций. Лишняя часть обрезается, поэтому режим подходит обложкам и карточкам товаров.

.card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Режим contain

contain показывает объект целиком. Если пропорции не совпадают, по краям останется свободное место. Такой вариант удобен для логотипов и схем.

.logo {
  width: 180px; height: 100px;
  object-fit: contain;
}

Выбор видимой области

object-position смещает точку кадрирования. По умолчанию используется центр, но для портрета можно сохранить верхнюю часть фотографии.

.portrait {
  object-fit: cover;
  object-position: center top;
}

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

• Менять ширину и высоту без сохранения пропорций.
• Ожидать object-fit у фонового изображения.
• Обрезать важную часть кадра.
• Не задавать размеры и получать скачок страницы.

Связанные темы

Тег img · Изображения · background