Как пользоваться: Калькулятор соотношения сторон
- Введите соотношение (или нажмите готовое, например 16:9 или 9:16).
- Введите ширину, чтобы получить подходящую высоту, или высоту, чтобы получить ширину.
- Чтобы узнать соотношение существующего изображения или экрана, введите его размер в блоке Найти соотношение размера, затем нажмите Использовать это соотношение, чтобы изменить размер по нему.
- Скопируйте CSS (
aspect-ratioи запасной вариант с padding-top) и выберите стандартный размер из таблицы.
Что такое соотношение сторон?
Соотношение сторон — это пропорция между шириной и высотой, которая записывается как ширина:высота. Видео 1920 × 1080 и видео 1280 × 720 имеют разный размер, но одинаковое соотношение 16:9, поэтому одно масштабируется в другое без растяжения и обрезки. Сохранение соотношения при изменении размера не даёт картинке искажаться и предотвращает появление чёрных полос.
Формулы соотношения сторон
- Новая высота = новая ширина × высота соотношения ÷ ширина соотношения, например 1280 × 9 ÷ 16 = 720.
- Новая ширина = новая высота × ширина соотношения ÷ высота соотношения, например 1080 × 16 ÷ 9 = 1920.
- Упрощение размера: разделите обе стороны на их наибольший общий делитель (НОД). У 1920 и 1080 НОД равен 120, поэтому соотношение получается 16:9.
Некоторые размеры не сокращаются до аккуратных чисел: 1366 × 768 (распространённое разрешение ноутбуков) упрощается до 683:384, что примерно соответствует 16:9. Калькулятор показывает точное соотношение и ближайшее распространённое.
Распространённые соотношения сторон и где они используются
| Соотношение | Десятичное | Типичное применение |
|---|---|---|
| 16:9 | 1.778 | HD/4K-видео, YouTube, мониторы, презентации |
| 9:16 | 0.5625 | Stories, Reels, TikTok, YouTube Shorts |
| 4:3 | 1.333 | Старые телевизоры и мониторы, iPad, многие компактные камеры |
| 3:2 | 1.5 | Плёнка 35 мм, фото на зеркальные и беззеркальные камеры, ноутбуки Surface |
| 1:1 | 1 | Квадратные посты в соцсетях, аватары, миниатюры товаров |
| 4:5 | 0.8 | Вертикальные посты в ленте Instagram и Facebook |
| 21:9 | ≈ 2.33 | Ультраширокие мониторы, кинематографическое видео |
| 1.91:1 | 1.91 | Изображения Open Graph и превью ссылок (1200 × 630) |
Соотношение сторон в CSS
Современные браузеры поддерживают свойство aspect-ratio: aspect-ratio: 16 / 9; на элементе с заданной шириной задаёт ему подходящую высоту. Это удобно для адаптивных видеовставок, карточек и заглушек изображений, которые предотвращают сдвиг вёрстки (важно для Core Web Vitals, показатель CLS). Более старый способ — хак с padding-top: обёртка с height: 0; padding-top: 56.25% (9 ÷ 16 × 100), поскольку процентные значения вертикальных отступов считаются от ширины элемента. Оба варианта сгенерированы выше. Для самих файлов изображений используйте Image Resizer, а для превью ссылок OG Image Generator создаёт изображения 1200 × 630.
Также ищут как: соотношение сторон 16:9, css aspect-ratio, хак padding-top, соотношение сторон 4:3, соотношение сторон 9:16, aspect ratio calculator.
Инструменты, которые хорошо сочетаются с Калькулятор соотношения сторон
- Калькулятор clamp() — Введите минимальный и максимальный размер и диапазон ширины экрана.
- PX в REM конвертер — Переводите пиксели, rem и em, задав свой корневой размер шрифта, или вставьте целую таблицу стилей и преобразуйте все значения px за один раз.
- Калькулятор процентов — Семь популярных расчётов с процентами на одной странице.
- Калькулятор разницы во времени — Добавьте города, которые вас интересуют, и посмотрите разницу во времени с вашим часовым поясом, текущее местное время и то, день сейчас или ночь.
Часто задаваемые вопросы
Как рассчитать высоту по ширине и соотношению сторон?
Является ли 1920×1080 соотношением 16:9?
Какое соотношение сторон у 1080×1350?
Чему равно значение padding-top для 16:9?
Что лучше использовать в CSS: aspect-ratio или хак с padding?
aspect-ratio: его поддерживают все современные браузеры, и он не требует обёртки. Хак с padding оставьте, только если нужно поддерживать очень старые браузеры, например Safari до версии 15.