Свойство aspect-ratio: конец эпохи костылей и «резиновых» мучений
Слушай, заваривай кофе покрепче. Помнишь те времена, когда прилетала задача сделать сетку из идеально квадратных карточек, а контент внутри вечно всё ломал? Или когда видео на сайте превращалось в тонкую полоску в один пиксель, пока не прогрузится iframe? Это та самая боль, которая годами заставляла нас писать тонны лишнего кода и молиться на стабильный интернет у пользователя, чтобы верстка не «прыгала» при загрузке. Сегодня мы разберемся, как одно маленькое свойство отправило все эти мучения на свалку истории.
Как мы страдали раньше
До появления aspect-ratio мы развлекались как могли. Самый популярный и одновременно ужасный костыль — это Padding-top Hack. Идея была в том, что вертикальный padding в процентах считается от ширины родителя. Мы создавали контейнер с position: relative, задавали ему padding-top: 56.25% (привет, формат 16:9), а потом внутрь втыкали нужный контент через position: absolute с полным растягиванием.
Это работало, но боже, как это было неудобно! Читаемость кода стремилась к нулю, а любая попытка изменить пропорции превращалась в математический квест. Плюс, это создавало кучу проблем, если внутри нужно было использовать гибкие сетки, например, когда мы применяли скрытые возможности CSS Grid Layout для сложной раскладки. Нам приходилось оборачивать каждый чих в лишние div-ы, чтобы просто сохранить форму картинки.
Как делать правильно в 2026 году
В современном вебе всё решается одной строчкой кода. Свойство aspect-ratio говорит браузеру: «Эй, просто держи это соотношение сторон, независимо от того, какой ширины будет контейнер». Больше никаких оберток и абсолютного позиционирования. Самое крутое, что это свойство помогает бороться с CLS (Cumulative Layout Shift). Браузер резервирует место под элемент еще до того, как загрузится тяжелый ассет, и контент не прыгает перед глазами пользователя.
Это особенно полезно в адаптивной верстке, где размеры могут меняться динамически. Кстати, если ты работаешь с полноэкранными секциями, не забудь заглянуть в статью про динамические единицы вьюпорта dvh, lvh и svh, они идеально дополняют контроль над размерами в современном CSS.
Готовый сниппет кода
Вот как выглядит чистый и современный подход к созданию пропорциональных элементов. Обрати внимание на связку с object-fit — это база.
/* Стили для карточки с идеальными пропорциями */
.card {
display: flex;
flex-direction: column;
gap: 1rem;
}
.card-image {
width: 100%;
/* Устанавливаем соотношение сторон 16:9 */
aspect-ratio: 16 / 9;
/* Важно: заставляем контент заполнять пространство без искажений */
object-fit: cover;
border-radius: 12px;
}
.video-embed {
width: 100%;
/* Теперь iframe не схлопнется до загрузки */
aspect-ratio: 21 / 9;
background-color: #f0f0f0;
}
Частая ошибка новичков
Главный факап, который я вижу на код-ревью у мидлов — это попытка задать одновременно width, height и aspect-ratio. Запомни: если ты жестко прописываешь и ширину, и высоту в пикселях, свойство aspect-ratio просто игнорируется, потому что браузеру нечего вычислять — ты уже всё за него решил.
Чтобы магия работала, хотя бы одна из сторон должна быть auto (что является значением по умолчанию). Обычно мы фиксируем ширину (например, 100% от контейнера), а высоту доверяем aspect-ratio. И еще — не забывай про min-height. Если контента внутри станет слишком много (например, текста в «квадратном» блоке), свойство может сжать его, если ты не укажешь обратное. Используй aspect-ratio с умом, и твои интерфейсы будут выглядеть дорого и стабильно.
🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!