Hack Frontend Community

CSS Object-fit и Object-position

object-fit и object-position — это CSS свойства, которые позволяют контролировать, как содержимое (изображения, видео) отображается внутри своего контейнера, сохраняя при этом соотношение сторон.

Что такое object-fit?

object-fit определяет, как содержимое (обычно <img> или <video>) должно масштабироваться и размещаться внутри своего контейнера.

Значения object-fit

ЗначениеОписаниеПоведение
fillЗаполняет весь контейнерРастягивается, может искажаться
containВписывается в контейнерСохраняет пропорции, могут быть пустые области
coverЗаполняет контейнер с сохранением пропорцийМожет обрезаться, но заполняет весь контейнер
noneОригинальный размерНе масштабируется, может обрезаться
scale-downУменьшает, если нужноКак none или contain, выбирает меньший размер

Примеры использования

fill — заполнение контейнера

.image-container {
  width: 300px;
  height: 200px;
  border: 2px solid #333;
}

.image-fill {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

Результат: Изображение растягивается на весь контейнер, может искажаться.

contain — вписывание в контейнер

.image-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Результат: Изображение вписывается в контейнер, сохраняя пропорции. Могут остаться пустые области.

cover — заполнение с обрезкой

.image-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Результат: Изображение заполняет весь контейнер, сохраняя пропорции. Может обрезаться, но не искажается.

none — оригинальный размер

.image-none {
  width: 100%;
  height: 100%;
  object-fit: none;
}

Результат: Изображение сохраняет оригинальный размер, может обрезаться.

scale-down — уменьшение при необходимости

.image-scale-down {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

Результат: Изображение ведет себя как none или contain, выбирая меньший размер.

Визуальное сравнение

<div class="gallery">
  <div class="image-box">
    <img src="photo.jpg" class="img-fill" alt="Fill">
    <p>fill</p>
  </div>
  <div class="image-box">
    <img src="photo.jpg" class="img-contain" alt="Contain">
    <p>contain</p>
  </div>
  <div class="image-box">
    <img src="photo.jpg" class="img-cover" alt="Cover">
    <p>cover</p>
  </div>
  <div class="image-box">
    <img src="photo.jpg" class="img-none" alt="None">
    <p>none</p>
  </div>
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.image-box {
  width: 200px;
  height: 150px;
  border: 2px solid #ddd;
  overflow: hidden;
}

.image-box img {
  width: 100%;
  height: 100%;
}

.img-fill { object-fit: fill; }
.img-contain { object-fit: contain; }
.img-cover { object-fit: cover; }
.img-none { object-fit: none; }

Object-position

object-position определяет позицию содержимого внутри контейнера (аналогично background-position).

Значения object-position

/* Ключевые слова */
object-position: center;      /* по умолчанию */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: top left;
object-position: bottom right;

/* Проценты */
object-position: 50% 50%;     /* центр */
object-position: 0% 0%;       /* верхний левый угол */
object-position: 100% 100%;   /* нижний правый угол */

/* Пиксели */
object-position: 20px 30px;

Примеры с object-position

/* Фокус на лице человека */
.portrait {
  object-fit: cover;
  object-position: center top;
}

/* Фокус на правой части изображения */
.focus-right {
  object-fit: cover;
  object-position: right center;
}

/* Кастомная позиция */
.custom-position {
  object-fit: cover;
  object-position: 30% 70%;
}

Практические примеры

Карточка товара

<div class="product-card">
  <div class="product-image">
    <img src="product.jpg" alt="Товар">
  </div>
  <div class="product-info">
    <h3>Название товара</h3>
    <p>Описание товара</p>
  </div>
</div>

.product-card {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 200px;
  background: #f0f0f0;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

Аватар пользователя

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

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

Галерея изображений

.gallery-item {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

Работа с видео

object-fit также работает с элементами <video>:

<video class="video-player" controls>
  <source src="video.mp4" type="video/mp4">
</video>

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

Совместимость с aspect-ratio

object-fit отлично работает вместе с aspect-ratio:

.image-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Поддержка браузерами

object-fit и object-position поддерживаются во всех современных браузерах:

  • Chrome 31+
  • Firefox 36+
  • Safari 7.1+
  • Edge 16+

Для старых версий IE можно использовать полифилл или fallback.

Совет:

Используйте object-fit: cover для создания красивых карточек и галерей, где изображения должны заполнять контейнер без искажений. Комбинируйте с object-position для контроля фокуса изображения.