Забудь про сплюснутые лица: Магия object-fit и object-position
Слушай, помнишь тот кошмар, когда заказчик заливает в галерею вертикальное селфи, а оно должно отображаться в строгом горизонтальном прямоугольнике? Ты открываешь девтулзы и видишь, как несчастные лица растягиваются или сжимаются, превращаясь в персонажей из кривых зеркал. Раньше это было головной болью, но сегодня мы, как серьезные сеньоры, решаем это за две секунды.
Давай разберем, как сделать работу с изображениями по-настоящему элегантной, чтобы верстка не «разваливалась», а картинки выглядели идеально при любых пропорциях контейнера.
Как мы страдали раньше
Если ты застал времена до широкой поддержки современных свойств, то наверняка помнишь эти танцы с бубном. Мы делали div, вешали на него background-image, выставляли background-size: cover и background-position: center.
Вроде работало, но какой ценой? Мы теряли семантику тега img, ломали доступность (скринридеры не видят фоновые картинки) и создавали проблемы для SEO. А если нужно было сохранить пропорции, в ход шли безумные хаки с padding-bottom: 56.25%. Это было похоже на костыль, примотанный синей изолентой к велосипеду. Чтобы не плодить лишние обертки и костыли, лучше сразу разобраться, как правильно работать со специфичностью каскада, чтобы глобальные стили для картинок не перекрыли твои локальные фиксы.
Как делать правильно в 2026 году
Сегодня у нас есть object-fit. Это свойство говорит браузеру: «Эй, заполни этот тег img контентом так, как будто это фоновое изображение». Самое мощное значение здесь — cover. Оно сохраняет пропорции, обрезая лишнее, и полностью заполняет отведенную область.
А если важная часть фото (например, макушка человека) обрезается, на помощь приходит object-position. Это полный аналог позиционирования фона, позволяющий сдвинуть «камеру» в нужную сторону. В сочетании с современным aspect-ratio это превращает работу с изображениями в удовольствие. Особенно круто это работает в гибких сетках, где используется отзывчивая (fluid) типографика с функцией clamp(), — картинки подстраиваются под изменения размеров так же плавно, как и текст.
Готовый сниппет кода
Вот как выглядит современный стандарт оформления карточки товара или аватара пользователя. Минимум кода, максимум профита:
.card-image {
/* Задаем размеры контейнера или используем aspect-ratio */
width: 100%;
aspect-ratio: 16 / 9;
/* Главная магия */
object-fit: cover;
/* Сдвигаем фокус, если нужно (например, вверх на 20%) */
object-position: center 20%;
/* Не забываем про плавность при ховере */
transition: object-position 0.3s ease;
}
.card-image:hover {
object-position: center 50%;
}
Частая ошибка новичков
Самый частый затык, который я вижу на код-ревью у мидлов: они пишут object-fit: cover, но забывают жестко ограничить высоту или задать aspect-ratio.
Запомни: если у картинки height: auto, то браузер просто растянет ее до оригинальных пропорций файла, и object-fit просто не включится, потому что картинке нечего «заполнять» — она и так занимает всё своё пространство. Чтобы магия сработала, у тега img должны быть четко определены и ширина, и высота (хотя бы через проценты или вьюпорт-единицы). Без этого ты просто потратишь время на написание свойств, которые не сработают.
🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!