Изображения в CSS: объект-fit, object-position, responsive images

Контролируем поведение изображений в CSS 🔥

Изображения — не просто украшение сайта. Они влияют на восприятие контента, скорость загрузки и даже SEO.
Разберёмся, как управлять их отображением с помощью CSS, чтобы они выглядели идеально в любом контексте!

object-fit: как вписать квадратное в круглое (и наоборот)

Представьте: у вас есть карточка товара с фиксированными размерами, но изображения загружаются разных пропорций.
Без магии CSS они либо растягиваются, либо обрезаются. Но object-fit решает эту проблему!

img {
  width: 300px;
  height: 200px;
  object-fit: cover; /* заполняет контейнер, сохраняя пропорции */
}

Варианты object-fit:

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

🔥 Совет: object-fit: cover — ваш лучший друг для галерей и карточек!

object-position: управляем фокусом обрезки

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

img {
  object-fit: cover;
  object-position: top center; /* фокусировка на верхней части */
}

Примеры позиционирования:
- object-position: 20% 50% — смещение по X и Y.
- object-position: right bottom — классические ключевые слова (left, center, top и т.д.).

💡 Полезно для портретов: object-position: top предотвратит обрезку лиц.

Адаптивные изображения: <picture> и srcset

Респонсив-дизайн требует гибкости. Зачем грузить тяжелое 4K-изображение на мобильном?

Вариант 1: Атрибут srcset

<img 
  src="image-default.jpg" 
  srcset="image-small.jpg 480w, image-large.jpg 1024w" 
  sizes="(max-width: 600px) 480px, 1024px" 
  alt="Адаптивное изображение"
>

• srcset — список изображений + их ширина (480w = 480px).
• sizes — условия выбора (например, на экранах до 600px браузер возьмёт image-small.jpg).

Вариант 2: Тег <picture> для полного контроля

<picture>
  <source media="(max-width: 799px)" srcset="image-mobile.jpg">
  <source media="(min-width: 800px)" srcset="image-desktop.jpg">
  <img src="image-fallback.jpg" alt="Описание">
</picture>

• Браузер выберет подходящий <source> исходя из условий media.
• <img> — фолбэк для старых браузеров.

🚀 Важно: <picture> также поддерживает форматы типа WebP с фолбэком на JPEG/PNG!

Комбо-приём: object-fit + aspect-ratio

Хотите, чтобы блок сохранял пропорции при адаптации?

.card {
  aspect-ratio: 16 / 9; /* соотношение сторон */
}

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

Теперь карточка всегда будет 16:9, а изображение заполнит её без искажений!

Итоги

• object-fit — контроль заполнения контейнера (cover, contain).
• object-position — смещение «кадра» (top, center, 20% 50%).
• <picture> и srcset — адаптивная загрузка изображений.
• aspect-ratio — фиксированные пропорции без JS.

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

P.S. Если любите глубже разбирать CSS, загляните к Даниле Бежину на YouTube — он мастер визуальных эффектов!