Объекты замещения: object-fit, object-position и их влияние на изображения

Зачем нужны object-fit и object-position? 🎭

Представьте: вы верстаете карточку товара, а изображения то обрезаются, то растягиваются, то вообще теряют пропорции. Знакомо? Это классическая проблема работы с <img> внутри контейнеров фиксированного размера.

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

Эти свойства работают не только с <img>, но и с <video>, <iframe> и другими замещаемыми элементами.

Как работает object-fit? 🧩

Свойство object-fit принимает пять значений:

img {
  width: 300px;
  height: 200px;
  object-fit: fill | contain | cover | none | scale-down;
}

Разбираем на примерах:

1. fill (по умолчанию)

• Растягивает содержимое на всю область контейнера без сохранения пропорций.
• Может искажать изображение.

.example-fill {
   object-fit: fill;
}

2. contain

• Масштабирует изображение с пропорциями, чтобы оно полностью поместилось в контейнер.
• Могут появиться пустые области (как у background-size: contain).

.example-contain {
   object-fit: contain;
}

3. cover

• Заполняет контейнер полностью, сохраняя пропорции.
• Обрезает края, если соотношение сторон не совпадает.

.example-cover {
   object-fit: cover;
}

4. none

• Отключает масштабирование. Изображение сохраняет исходный размер, но может обрезаться.

.example-none {
   object-fit: none;
}

5. scale-down

• Автоматически выбирает между contain и none (берет вариант с наименьшим размером).

.example-scale-down {
   object-fit: scale-down;
}

💡 Совет: Чаще всего используют cover (например, для аватарок) и contain (для логотипов и иконок).

Точное позиционирование с object-position 🎯

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

img {
  object-fit: cover;
  object-position: 50% 50%; /* По умолчанию — центр */
}

Примеры смещения:

• Сдвиг влево (показывает правую часть изображения):

.example-left {
  object-position: left;
}

• Фокусировка на верхней части (полезно для портретов):

.example-top {
  object-position: top;
}

• Кастомные координаты (например, 30% по X и 75% по Y):

.example-custom {
  object-position: 30% 75%;
}

🎥 Кейс: На сайте кинотеатра object-position: top помогает показывать лица актеров в превью, даже если контейнер квадратный.

Практика: делаем адаптивную галерею 🖼️

Рассмотрим реальный пример — галерею с карточками разного размера.

HTML:

<div class="gallery">
  <img src="photo1.jpg" alt="Пейзаж">
  <img src="photo2.jpg" alt="Портрет">
  <img src="photo3.jpg" alt="Архитектура">
</div>

CSS:

.gallery img {
  width: 100%; /* Занимает всю ширину контейнера */
  height: 250px; /* Фиксированная высота */
  object-fit: cover; /* Сохраняет пропорции и заполняет контейнер */
  object-position: center; /* Центрирует изображение */
  border-radius: 8px; /* Скругленные углы */
}

Результат:

• Все изображения выровнены по высоте.
• Пропорции сохранены, а важные части (например, лица) не обрезаются.

Подводные камни и решения ⚠️

1. Не работает? Проверьте:

• Указаны ли width и height у контейнера или изображения.
• Подключен ли современный браузер (IE11 и ниже не поддерживают object-fit).

2. Альтернатива для старых браузеров:

@supports not (object-fit: cover) {
   img {
     /* Fallback: фоновая картинка через CSS */
     background-image: url("photo.jpg");
     background-size: cover;
     background-position: center;
   }
}

3. Видео и iframe тоже поддерживают object-fit:

video {
   object-fit: cover;
}

Итог: когда и как применять 🏆

Теперь вы знаете, как легко управлять отображением изображений без лишних оберток или JavaScript. Попробуйте применить эти свойства в своем следующем проекте — результат вас впечатлит!

🔥 Дополнительно: Хотите глубже разобрать CSS? Посмотрите уроки Данилы Бежина — там много практических примеров!