# Что такое соотношение сторон?
В графическом дизайне, фотографии и фронтенд-разработке соотношение сторон (Aspect Ratio) описывает геометрическую связь между шириной и высотой изображения, экрана или контейнера. Обычно оно представляется двумя числами через двоеточие (например,16:9), указывая, как высота пропорционально изменяется в ответ на ширину.Несоблюдение соотношения сторон — частая причина сплющенных фотографий, видео с неожиданной обрезкой (letterboxing) или веб-компонентов, макет которых нарушается при просмотре на разных устройствах — от мобильных телефонов до ультрашироких мониторов.# Общепринятые стандарты в индустрии
В зависимости от вашей дисциплины вы будете постоянно сталкиваться с ограниченным набором мировых стандартов пропорций:- 16:9 (Широкоэкранный): Абсолютно доминирующий формат для современных мониторов, телевизоров, видео на YouTube или стандартных разрешений высокой четкости (таких как 1920×1080 или 4K).
- 9:16 (Вертикальный): Возник из-за потребления контента на мобильных устройствах (TikTok, Instagram Reels, YouTube Shorts). Точно такое же соотношение, как у широкоэкранного видео, но при физическом повороте устройства.
- 4:3 (Классический): Встречается в старых телевизорах и мониторах, а также в аналоговых и специализированных цифровых камерах. Его почти квадратный вид привлекает внимание к центральной оси композиции.
# Веб-разработка и свойство CSS aspect-ratio
Раньше в CSS использовались сложные математические системы с Padding Hack (например,padding-top: 56.25%) для резервирования динамического пространства для YouTube iframe или фоновых изображений, чтобы избежать скачков контента (Cumulative Layout Shift, CLS) при загрузке страницы.Сейчас все современные макеты напрямую применяют свойство aspect-ratio: 16 / 9;, создавая семантичный код и позволяя браузеру автоматически рассчитывать недостающее измерение на основе оригинальной ширины, заданной через Grid или Flexbox.Этот локальный калькулятор пикселей позволяет мгновенно рассчитать масштаб дизайна, что защитит ваши макеты от критических ошибок в настройках.