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
На практике чаще всего используются 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;
}Это полезно для промо-блоков и заставок, где важнее заполнить область, чем показать весь исходный кадр.
Практические рекомендации
Если вы хотите не просто знать отдельные CSS-свойства, а уверенно собирать реальные страницы, карточки, сетки, шапки и адаптивные блоки, полезно разобрать вёрстку реального сайта с нуля до готового результата. Там такие приёмы вроде object-fit становятся частью понятной практической системы.
Итог
CSS object-fit — одно из самых полезных свойств для работы с изображениями в современной вёрстке. Оно позволяет обрезать изображение без искажений, сохранять аккуратные карточки и контролировать внешний вид медиафайлов. Запомните простое правило: cover — красиво заполнить область, contain — показать изображение целиком, object-position — выбрать важную часть кадра.
