Як користуватися
- Щоб змінити розмір, введіть співвідношення (наприклад, 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.
Конфіденційність
Усі обчислення виконуються у вашому браузері. Дані не надсилаються й не зберігаються.