CSS object-fit и object-position: как красиво обрезать изображения без искажений

Поисковый запрос, под который написана эта статья: CSS object-fit как обрезать изображение без искажений. Это частая задача в вёрстке: у вас есть карточка товара, аватар пользователя или большой баннер, а изображения приходят разных размеров. Если просто задать ширину и высоту, картинка может растянуться и выглядеть неаккуратно. Свойства object-fit и object-position решают эту проблему чистым CSS.

Что делает object-fit

object-fit задаёт, как содержимое заменяемого элемента — например, img или video — должно помещаться в заданную область. Важно: свойство работает, когда у элемента есть фиксированная область, то есть обычно заданы width и height.

.image {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

В этом примере изображение займёт блок 300×200 пикселей, сохранит пропорции и будет обрезано по краям, если пропорции картинки не совпадают с пропорциями блока.

Основные значения object-fit

• fill — значение по умолчанию. Картинка растягивается под размеры блока, пропорции могут исказиться.
• contain — изображение целиком помещается внутрь блока, пропорции сохраняются, но могут появиться пустые области.
• cover — изображение полностью закрывает блок, пропорции сохраняются, лишняя часть обрезается.
• none — картинка не масштабируется.
• scale-down — браузер выбирает меньший вариант между none и contain.

На практике чаще всего используются cover и contain.

Пример: карточка товара с аккуратным изображением

Представим карточку товара. Изображения в админке загружают разные: горизонтальные, вертикальные, квадратные. Нам нужно, чтобы сетка выглядела ровно.

<article class="product-card">
  <img class="product-card__image" src="product.jpg" alt="Кроссовки">
  <h3 class="product-card__title">Кроссовки Urban</h3>
  <p class="product-card__price">4 990 ₽</p>
</article>

.product-card {
  width: 280px;
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.product-card__image {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.product-card__title,
.product-card__price {
  margin: 12px 16px;
}

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

Когда использовать cover, а когда contain

cover подходит, когда важна красивая заливка области: карточки, фоновые изображения через img, баннеры, аватары, превью статей. Минус: часть изображения может быть обрезана.

contain подходит, когда нельзя терять ни одного фрагмента изображения: логотипы, схемы, товары на прозрачном фоне, сертификаты, иллюстрации с текстом.

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

Если для логотипа поставить cover, браузер может обрезать часть надписи. Поэтому для логотипов почти всегда безопаснее contain.

Как управлять точкой обрезки через object-position

Свойство object-position указывает, какая часть изображения должна быть в фокусе при масштабировании и обрезке. По умолчанию используется центр:

.image {
  object-fit: cover;
  object-position: center center;
}

Если на фотографии важен верх, например лицо человека, можно сместить фокус вверх:

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

Можно использовать ключевые слова, проценты и пиксели:

.photo-1 { object-position: left center; }
.photo-2 { object-position: 50% 20%; }
.photo-3 { object-position: right bottom; }

Запись 50% 20% означает: по горизонтали центр, по вертикали ближе к верхней части изображения.

Типичная ошибка: object-fit не работает

Чаще всего проблема в том, что у изображения не задана высота. Если написать только width: 100%, браузер сохранит естественные пропорции картинки, и object-fit будет почти незаметен.

/* Не всегда даёт ожидаемый результат */
.card img {
  width: 100%;
  object-fit: cover;
}

/* Правильнее: есть область, в которую помещается изображение */
.card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

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

Современный вариант: aspect-ratio вместо фиксированной высоты

Если нужна адаптивная картинка с пропорциями, удобно использовать aspect-ratio. Например, превью 16:9:

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

Так изображение будет менять ширину вместе с карточкой, но высота рассчитается автоматически по заданному соотношению сторон.

object-fit для видео

Свойство работает не только с изображениями, но и с видео. Например, можно сделать видео-баннер, который заполняет экран без искажений:

.hero-video {
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center;
}

Это полезно для промо-блоков и заставок, где важнее заполнить область, чем показать весь исходный кадр.

Практические рекомендации

• Для карточек товаров и статей чаще используйте object-fit: cover.
• Для логотипов, иконок и изображений с текстом выбирайте object-fit: contain.
• Всегда задавайте изображению область: width вместе с height или aspect-ratio.
• Используйте object-position, если важная часть изображения обрезается.
• Добавляйте display: block для img, чтобы убрать лишний нижний зазор, связанный со строчным поведением изображений.

Если вы хотите не просто знать отдельные CSS-свойства, а уверенно собирать реальные страницы, карточки, сетки, шапки и адаптивные блоки, полезно разобрать вёрстку реального сайта с нуля до готового результата. Там такие приёмы вроде object-fit становятся частью понятной практической системы.

Итог

CSS object-fit — одно из самых полезных свойств для работы с изображениями в современной вёрстке. Оно позволяет обрезать изображение без искажений, сохранять аккуратные карточки и контролировать внешний вид медиафайлов. Запомните простое правило: cover — красиво заполнить область, contain — показать изображение целиком, object-position — выбрать важную часть кадра.