object-fit: cover или contain — что выбрать, чтобы картинки не сплющивало и не резало

Загружаешь в карточки фото разных размеров. Одно сплющило, другое вытянуло, кот стал похож на таксу. Это не баг браузера — это значение по умолчанию.

У свойства object-fit начальное значение — fill. MDN описывает его прямо: картинка заполняет рамку целиком, а если пропорции не совпадают — растягивается. Две популярные замены, cover и contain, чинят сплющивание по-разному. Одна режет края. Вторая оставляет пустые поля. Разберёмся, где что.

Что делает каждое значение

• fill — по умолчанию. Растягивает картинку под рамку, пропорции не сохраняет.
• cover — сохраняет пропорции и заполняет всю рамку. Всё, что не влезло, обрезается.
• contain — сохраняет пропорции и показывает картинку целиком. Где не хватило — пустые полосы сверху и снизу или по бокам.
• scale-down — как contain, но никогда не увеличивает картинку больше её настоящего размера.
• none — не меняет размер вообще. Нужен редко: например, показать кусок большой картинки в натуральном размере, как через окошко.

Работает object-fit на заменяемых элементах: <img> и <video>.

Важное условие, о котором часто забывают: у рамки должен быть свой размер — и ширина, и высота или aspect-ratio. Если у картинки width: 100% и height: auto, рамка сама принимает пропорции фото. Вписывать нечего, и object-fit будто не работает.

Сравнение по критериям, которые важны

• Потеря содержимого. cover отрезает края. contain показывает всё до пикселя.
• Пустые поля. У cover их нет. У contain есть полосы, и их цвет — это фон контейнера. Задай его сам, иначе будет белое на тёмном сайте.
• Ровная сетка карточек. С cover все превью одинаково залиты — сетка выглядит аккуратно. С contain в одинаковых рамках картинки разного размера, и ряд кажется неровным.
• Фото людей. cover по умолчанию режет от центра: у object-position начальное значение 50% 50%. Вертикальный портрет в широкой рамке теряет макушку и подбородок поровну — иногда вместе с глазами.
• Товары, логотипы, скриншоты. Обрезанный логотип или кнопка на скриншоте хуже пустых полей. Здесь contain.
• Маленькие исходники. И cover, и contain растягивают крошечную картинку до размера рамки — получается мыло. scale-down маленькое не раздувает.

Кому что подойдёт

Без увиливаний.

Бери cover, когда картинка — атмосфера, а не информация. Аватары, превью в карточках, обложки статей, фото на первом экране. И сразу добавляй object-position, чтобы решить, что спасать при обрезке.

Бери contain, когда важна каждая деталь. Карточки товаров, логотипы партнёров, скриншоты, схемы, картинки, сгенерированные ИИ, где композиция и есть смысл.

Бери scale-down для того, что загружают пользователи: заранее неизвестно, пришлют огромное фото или иконку 64 на 64.

Частый рабочий приём — оба сразу. В сетке превью стоят на cover: ряды ровные. А по клику открывается полноэкранный просмотр на contain: там картинку видно целиком, ничего не потеряно.

Не знаешь, что выбрать — ставь cover и сразу проверь самый неудобный кадр: вертикальный портрет в горизонтальной рамке. Если режет лицо — либо двигай object-position, либо тебе нужен contain.

Как это написать

Обычный CSS для карточки:

.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 25%;
}

center 25% сдвигает кадр вверх: при обрезке сохраняется верхняя часть фото, где обычно лица.

В Tailwind это классы object-cover, object-contain и object-top. Чем такие классы удобнее ручных стилей, разобрано в статье Tailwind или CSS.

В Next.js у компонента Image с пропом fill родитель должен быть с position: relative, а режим задаётся через style={{ objectFit: 'cover' }}. Без object-fit картинка в таком режиме тоже растянется.

Для фоновых картинок в CSS те же слова живут в другом свойстве: background-size: cover или contain.

Как проверить выбор за минуту

Открой DevTools, выдели картинку и в панели Styles поменяй значение object-fit. Картинка перестроится на лету — сравнить варианты можно без перезагрузки.

И не проверяй на одном удачном фото. Возьми три неудобных кадра: высокий вертикальный, очень широкий и крошечный. Генераторы картинок на ИИ умеют выдавать изображения в разных пропорциях — одна галерея легко получит все три сразу. Если на всех трёх карточки выглядят прилично, выбор сделан.

Если картинки приходят от пользователей, пригодится и статья как добавить загрузку картинок.

Почему object-fit не работает?

Чаще всего у рамки нет высоты: height: auto подстраивает её под фото. Задай высоту или aspect-ratio. Если же картинка — это фон div, нужен background-size, а не object-fit. Когда не применяется вообще ничего, пройдись по причинам, почему CSS не работает.

Как сделать круглый аватар из прямоугольного фото?

Квадратная рамка, cover и скругление:

.avatar {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
}

Фото не квадратное — края обрежутся, но лицо не сплющится.

Как выбрать, какую часть картинки оставить при cover?

Через object-position. Значения как у фона: top, right bottom, center 25%. Первое число — по горизонтали, второе — по вертикали.

Работает ли это с видео?

Да. <video> тоже заменяемый элемент, и object-fit: cover — стандартный способ сделать видео-фон без чёрных полос.