Калькулятор пропорцій

Що таке калькулятор співвідношення сторін?

Калькулятор співвідношення сторін визначає пропорційне співвідношення між шириною та висотою прямокутної форми. Співвідношення сторін виражається як ширина:висота (наприклад, 16:9 або 4:3) і є необхідним для виробництва відео, фотографії, адаптивного вебдизайну та поліграфічної верстки. Цей інструмент розраховує співвідношення сторін з піксельних розмірів або масштабує розміри відповідно до бажаного співвідношення.

Розуміння співвідношень сторін запобігає розтягуванню або обрізуванню контенту на різних дисплеях. Відео 16:9 виглядає ідеально на широкоформатному телевізорі, але отримує чорні смуги на дисплеї 4:3. Дизайнери та розробники використовують співвідношення сторін для створення адаптивних макетів, що зберігають пропорції на різних розмірах екранів.

Як користуватися цим інструментом

Введіть ширину та висоту в пікселях для розрахунку співвідношення сторін. Або введіть цільове співвідношення та один розмір для розрахунку іншого. Інструмент зводить співвідношення до найпростішої форми (1920×1080 стає 16:9) та показує поширені пресети для швидкого ознайомлення.

Як обчислити відсутній розмір

Співвідношення сторін виражає пропорційний зв'язок між шириною та висотою — незалежно від абсолютного розміру. Співвідношення 16:9 означає, що на кожні 16 одиниць ширини припадає 9 одиниць висоти. Оскільки співвідношення не залежить від масштабу, мініатюра 160×90 і 4K-дисплей 3840×2160 мають абсолютно однакове співвідношення сторін.

Щоб масштабувати розміри зі збереженням співвідношення, використовуйте два формули. Для знаходження нової висоти за новою шириною: нова висота = нова ширина × (оригінальна висота ÷ оригінальна ширина). Для знаходження нової ширини за новою висотою: нова ширина = нова висота × (оригінальна ширина ÷ оригінальна висота). Обидві формули просто застосовують оригінальне співвідношення як множник.

Практичний приклад: масштабування 1920×1080

Візьмемо кадр Full HD розміром 1920×1080 пікселів. Спочатку спростимо співвідношення, знайшовши найбільший спільний дільник (НСД) чисел 1920 і 1080. Застосовуючи алгоритм Евкліда: НСД(1920, 1080) = НСД(1080, 840) = НСД(840, 240) = НСД(240, 120) = 120. Поділивши обидва розміри на 120, отримуємо 16:9 — знайоме широкоекранне співвідношення.

Припустімо, потрібно масштабувати відео до ширини 1280 пікселів для меншого дисплея. Застосуємо формулу: нова висота = 1280 × (1080 ÷ 1920) = 1280 × 0,5625 = 720. Масштабований кадр — 1280×720, він же 720p HD — і залишається точно 16:9.

Попередження про округлення: розміри в пікселях мають бути цілими числами. Завжди округляйте до найближчого цілого. При кодуванні відео округляйте до найближчого парного числа, щоб уникнути помилок кодека при субдискретизації хроми (наприклад, YUV 4:2:0 вимагає парних розмірів).

Поширені співвідношення сторін та де вони застосовуються

• 16:9 — Домінуючий стандарт для HD- та 4K-відео. Використовується на YouTube, Netflix, Twitch, сучасних телевізорах і більшості моніторів. Типові роздільні здатності: 1280×720 (HD), 1920×1080 (Full HD), 2560×1440 (QHD), 3840×2160 (4K UHD).
• 4:3 — Застарілий стандарт для CRT-телевізорів і ранніх комп'ютерних моніторів. Досі використовується в презентаціях, деяких моделях iPad і вінтажних кіноформатах. Широкоекранне відео 1920×1080 на екрані 4:3 відображається з горизонтальними чорними смугами зверху та знизу (letterboxing).
• 1:1 — Квадратний формат. Незамінний для постів у стрічці Instagram, аватарів, іконок застосунків і обкладинок альбомів. Легко кадрується з будь-якого ширшого формату без втрати головного об'єкта.
• 9:16 — Вертикальний аналог 16:9. Рідний формат для екранів смартфонів у портретній орієнтації. Використовується в Instagram Stories, TikTok, YouTube Shorts і Snapchat.
• 21:9 — Ультраширокий кіно- та моніторний формат. Поширений у кінофільмах (часто відображається як 2,35:1 або 2,39:1) та ультраширокоекранних ігрових моніторах. Контент у форматі 16:9 на дисплеї 21:9 відображається з вертикальними чорними смугами з боків (pillarboxing).
• 3:2 — Класичне співвідношення 35 мм плівки, перенесене в більшість цифрових дзеркальних і бездзеркальних камер. Фотографія 6×4 дюйми має співвідношення 3:2. Типові роздільні здатності: 6000×4000 (24 Мп) і 7952×5304 (42 Мп).

Поширені співвідношення сторін

• 16:9 — широкоформатний стандарт для HD/4K відео, сучасних моніторів, YouTube, стримінгових сервісів.
• 4:3 — традиційні телевізори та комп'ютерні монітори, iPad, слайди презентацій.
• 21:9 — ультраширокі монітори та кінематографічний контент.
• 1:1 — квадратний формат, публікації Instagram, фото профілю.
• 9:16 — вертикальний відеоформат для мобільного контенту (Stories, TikTok, Shorts).

Letterboxing і pillarboxing: що відбувається при невідповідності співвідношень

Коли співвідношення сторін контенту не збігається зі співвідношенням контейнера, дисплей змушений компенсувати різницю. Letterboxing додає горизонтальні чорні смуги зверху та знизу — це видно при перегляді кінофільму 2,39:1 на телевізорі 16:9. Pillarboxing додає вертикальні чорні смуги ліворуч і праворуч — це видно, коли трансляція 4:3 показується на широкоекранному 16:9. Коли обидві пари смуг присутні одночасно (контент менший за контейнер в обох вимірах), ефект називається windowboxing.

Альтернативою чорним смугам є кадрування або розтягування. Кадрування заповнює контейнер, але відрізає частину зображення. Розтягування заповнює контейнер, але спотворює зображення — обличчя та кола стають овалами. Жоден варіант не є ідеальним, тому вибір правильного вихідного співвідношення з самого початку позбавляє від проблем при постобробці.

Типові помилки, яких слід уникати

• Ігнорування співвідношення при зміні розміру: введення нової ширини без оновлення висоти призводить до спотвореного, розтягнутого контенту. Завжди фіксуйте співвідношення сторін перед зміною розміру.
• Незалежне округлення обох розмірів: округлення ширини вгору і висоти вниз (або навпаки) вносить мінімальне відхилення від співвідношення, яке накопичується при багаторазовому масштабуванні. Округлюйте один розмір, а потім обчислюйте інший на основі округленого значення.
• Плутанина між співвідношенням відображення та співвідношенням зберігання: анаморфне відео (поширене в ефірному мовленні та Blu-ray) зберігає пікселі в одному співвідношенні, але сигналізує програвачу відображати його в іншому. Завжди перевіряйте метадані Sample Aspect Ratio (SAR), а не лише розміри кадру.
• Припущення про універсальність 16:9: у дизайні для мобільних пристроїв часто потрібні матеріали у форматі 9:16. Соціальні платформи можуть автоматично обрізати до 4:5 або 1,91:1. Експортуйте кілька варіантів кадрування, а не покладайтеся на одне співвідношення.

Співвідношення сторін у вебдизайні

У CSS властивість aspect-ratio підтримує пропорції для адаптивних елементів. До появи цієї властивості розробники використовували хак з padding-bottom (padding-bottom: 56,25% для 16:9). Сучасний CSS робить це простим: встановіть aspect-ratio: 16 / 9 на будь-якому елементі. Це є критично важливим для вбудовування відео, створення фотогалерей та розробки макетів карток, що виглядають послідовно на різних пристроях.

Часті запитання

Яке співвідношення сторін у 1920×1080?

1920×1080 (Full HD) має співвідношення сторін 16:9, що є стандартним широкоформатним форматом. Інші поширені роздільні здатності 16:9 включають 2560×1440 (QHD), 3840×2160 (4K UHD) та 1280×720 (HD). Співвідношення 16:9 стало стандартом для HD-контенту, оскільки воно пропонує ширше поле зору, ніж 4:3, будучи при цьому практичним для більшості типів контенту.

Як зберігати співвідношення сторін при зміні розміру?

Заблокуйте співвідношення сторін у вашому інструменті редагування (зазвичай значок ланцюжка між полями ширини та висоти). При зміні одного розміру інший налаштовується пропорційно. Математично: нова висота = нова ширина / (оригінальна ширина / оригінальна висота). Наприклад, для зміни розміру зображення 1920×1080 до ширини 1280: 1280 / (1920/1080) = 720.

Що таке НСД і чому він важливий?

Найбільший спільний дільник (НСД) — це найбільше число, яке ділить і ширину, і висоту без залишку. Поділивши обидва розміри на їх НСД, ми скорочуємо співвідношення до найпростішого вигляду. Наприклад, НСД(1280, 720) = 80; 1280 ÷ 80 = 16 і 720 ÷ 80 = 9, що дає 16:9. Без спрощення ви бачили б 1280:720 замість звичного позначення 16:9.

Чи дійсно 4:3 те саме, що й 1,33:1?

Так. Співвідношення сторін можна виражати як ширина:висота цілими числами (4:3) або як десятковий дріб (1,33:1, де 4 ÷ 3 ≈ 1,333). У кіно та кінематографі традиційно використовується десяткова форма — 1,85:1 (плоский широкоекранний) і 2,39:1 (анаморфний), тоді як у відео та вебдизайні перевагу надають формі з двокрапкою та цілими числами. Цей калькулятор показує обидва варіанти: спрощене співвідношення (16:9) і десятковий еквівалент (1,7778).