Как пользоваться
- Чтобы изменить размер, укажите соотношение сторон (например, 16 и 9) или выберите распространённый вариант, затем введите ширину или высоту. Второе значение рассчитается автоматически.
- Чтобы найти соотношение сторон, введите ширину и высоту изображения, экрана или видео.
- Проверьте предварительный просмотр и скопируйте правило CSS aspect-ratio, если оно нужно для вёрстки сайта.
Как это работает
При пропорциональном изменении размера высота рассчитывается по формуле: высота = ширина × высота пропорции ÷ ширина пропорции (и наоборот). Размеры в пикселях обычно представляют собой целые числа, поэтому результат может быть округлён. Если соотношение не делится нацело, например 16:9 при ширине 1000, округлённая высота (563) будет близким приближением, а не точным значением.
Чтобы упростить соотношение сторон, обе стороны делят на их наибольший общий делитель: для 1920 и 1080 это 120, поэтому получается 16:9. Некоторые реальные размеры не сводятся к привычному соотношению. Размер 1366×768 точно соответствует 683:384 и очень близок к 16:9, поэтому инструмент также показывает ближайшее распространённое соотношение, если расхождение не превышает 2 %. Аналогично, мониторы с соотношением «21:9» на самом деле имеют соотношение 64:27 (2560×1080) или 43:18 (3440×1440); 21:9 — это маркетинговое название.
В CSS свойство aspect-ratio: 16 / 9 сохраняет форму элемента при изменении его ширины. Это удобно для встроенного видео и заглушек изображений, чтобы при загрузке не сдвигалась вёрстка.
Примеры
Размер миниатюры видео
Для миниатюры видео с соотношением 16:9 и шириной 1280 пикселей нужна высота 720 пикселей.
Как определить соотношение сторон экрана
Соотношение 2560×1600 сокращается до 8:5, то есть до 16:10 — распространённого формата экранов ноутбуков.
Вертикальная обрезка для соцсетей
При соотношении 4:5 и ширине 1080 высота составит 1350 пикселей — вертикальный формат, который подходит для многих лент.
Часто задаваемые вопросы
16:9 — это то же самое, что 1,78:1?
Да. 16 ÷ 9 ≈ 1,778, поэтому это одно и то же соотношение сторон. Киноформаты часто указывают десятичным числом, например 2,39:1.
Почему в результате есть дробная часть?
Не каждую ширину можно без остатка разделить на соотношение сторон. Для размеров в пикселях включите округление: результат будет округлён до целого пикселя и может немного отличаться от точного соотношения.
Свойство CSS aspect-ratio работает везде?
Поддерживается во всех актуальных популярных браузерах. Если для элемента явно заданы и ширина, и высота, они имеют приоритет над aspect-ratio.
Конфиденциальность
Все вычисления выполняются в браузере. Данные никуда не отправляются и не сохраняются.