Responsive images: CSS подходы

Адаптивные изображения в CSS — техники, обеспечивающие корректное отображение и обрезку изображений в контейнерах разных размеров без деформации через max-width, object-fit и aspect-ratio.

Зачем нужно

Изображения по умолчанию отображаются в своём нативном размере и могут выйти за границы контейнера или быть деформированы при изменении соотношения сторон. CSS-свойства object-fit и aspect-ratio решают эти проблемы элегантно без JavaScript.

Где используется

  • Карточки товаров с изображениями разных пропорций
  • Аватары и превью — обрезка по кругу или квадрату
  • Hero-секции с полноэкранным изображением
  • Галереи с равномерными ячейками
  • Фоновые изображения через background-size

Базовая адаптивность

/* Изображение не выходит за контейнер */
img {
  max-width: 100%;
  height: auto;
}

object-fit

Управляет тем, как изображение заполняет контейнер фиксированного размера:

.card__image {
  width: 100%;
  height: 200px;

  object-fit: cover;    /* обрезать, заполнить — без деформации */
  object-fit: contain;  /* вписать целиком — возможны «поля» */
  object-fit: fill;     /* растянуть — деформирует */
  object-fit: none;     /* нативный размер, обрезать */
  object-fit: scale-down; /* contain или none — что меньше */
}

/* Центрирование точки обрезки */
.card__image {
  object-position: center top; /* фокус на верхней части */
  object-position: 50% 20%;
}

<div class="card">
  <img class="card__image" src="photo.jpg" alt="Фото">
</div>

aspect-ratio

Поддерживает пропорции без padding-hack:

/* Квадратный контейнер для изображений */
.avatar {
  width: 80px;
  aspect-ratio: 1 / 1; /* квадрат */
  border-radius: 50%;
  overflow: hidden;
}

/* 16:9 видео-превью */
.video-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.avatar img,
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Фоновые изображения

.hero {
  background-image: url('hero.jpg');
  background-size: cover;     /* заполнить, обрезать */
  background-position: center;
  background-repeat: no-repeat;
  min-height: 60vh;
}

/* Адаптивное фоновое изображение через медиазапрос */
.hero {
  background-image: url('hero-mobile.jpg');
}

@media (min-width: 768px) {
  .hero {
    background-image: url('hero-desktop.jpg');
  }
}

Частые ошибки

  1. object-fit без заданной высоты — если у <img> нет height, object-fit: cover не имеет эффекта; всегда задавайте оба размера или aspect-ratio.
  2. Деформация аватаров — установка width: 100px; height: 100px без object-fit: cover деформирует изображение; добавьте object-fit.
  3. Padding-hack вместо aspect-ratio — padding-top: 56.25% работает, но aspect-ratio: 16/9 проще и поддерживается всеми современными браузерами.

Связанные темы

Ресурсы