Калькулятор співвідношення сторін – Збереження пропорцій

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

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

Цей калькулятор зменшує будь-який розмір ширини × висоти до найпростішого співвідношення за допомогою алгоритму найбільшого спільного діючого числа (МСД). Він також розрахунок правильної нової висоти при бажанні масштабувати до іншої ширини, забезпечуючи, щоб ваші зображення та відео ніколи не виглядають розтягнутими чи деформованими.

Соотношення сторін зустрічаються всюди в повсякденному житті: екран вашого смартфона, екран вашого ноутбука, зображення, які ви публікуєте в соціальних мережах, відео, які ви стримуєте, навіть розміри паперу, на якому ви друкуєте. Стандарт A4 використовує співвідношення √2:1 (приблизно 1,414:1), що дозволяє листам бути згинаються в півтора, зберігаючи ті ж пропорції.

Найпоширеніші співвідношення сторін та їх застосування

Різні співвідношення сторін мають різні цілі в різних галузях. Таблиця нижче містить найбільш поширені співвідношення разом із їхньою звичайною метою, щоб ви могли швидко ідентифікувати, який з них підходить для проекту.

Фільмова індустрія використовує декілька спеціалізованих співвідношень сторін, що виходять за межі стандартних телевізійних форматів. Кошиковий співвідношення (1,375:1) домінувало в ранньому кінематографі, тоді як сучасні блокбастери використовують або 1,85:1 (рівний широкий екран) або 2,39:1 (аніморфний екран). IMAX використовує співвідношення 1,43:1, яке набагато вище, ніж стандартний широкий екран — саме тому IMAX сцени виглядають захоплюючими.

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

Зміна розміру зображення або відео, зберігаючи співвідношення сторін, передбачає фіксацію однієї розмірності та розрахунок іншої пропорційно. Формули досить прості:

• Знаний новий розмір ширини, розв'язати висоту: Нова висота = (Оригінальна висота × Нова ширина) ÷ Оригінальна ширина
• Знаний новий розмір висоти, розв'язати ширину: Нова ширина = (Оригінальна ширина × Нова висота) ÷ Оригінальна висота

Приклад 1: Змінити розмір 1920 × 1080 зображення до 1280 пікселів ширини:
Нова висота = (1080 × 1280) ÷ 1920 = 720. Результат: 1280 × 720 (ще 16:9).

Приклад 2: Змінити розмір 4000 × 3000 фотографії (4:3) для розміщення у 1200-піксельну колонку:
Нова висота = (3000 × 1200) ÷ 4000 = 900. Результат: 1200 × 900 (ще 4:3).

Приклад 3: Вам потрібен банер 600 пікселів висоти на основі джерела 2560 × 1440:
Нова ширина = (2560 × 600) ÷ 1440 = 1067. Результат: 1067 × 600 (ще 16:9).

Більшість програм для редагування зображень (Photoshop, GIMP, Figma, Canva) містять кнопку «Замкнути співвідношення сторін» або «Зберігати пропорції». Коли вона активована, зміна однієї розмірності автоматично змінює іншу. Однак якщо вам потрібно розрахувати розміри до відкриття редактора — або ви працюєте з CSS, відповідними зображеннями або налаштуваннями кодування відео — цей калькулятор надає точні значення миттєво.

Аспектні співвідношення в веб-дизайні та CSS

Сучасний веб-дизайн дуже залежить від аспектних співвідношень для відповідних розміток. CSS-підсила aspect-ratio (підтримується всіма сучасними браузерами з 2021 року) дозволяє визначити пропорції прямокутника прямо:

.video-container { aspect-ratio: 16 / 9; width: 100%; }

Це створює відповідний контейнер, який завжди підтримує співвідношення 16:9 незалежно від розміру вікна перегляду — більше ніяких хаків із додатковим відступом. Звичайні випадки використання:

• Вбудовані відео: Відео YouTube та Vimeo потрібно розміщувати в контейнерах із співвідношенням 16:9, щоб уникнути чорних смуг або обрізання.
• Представлення зображень: Встановлення співвідношення перед завантаженням зображення запобігає накопиченню зміщення розмітки (CLS), ключовому показнику Web Core Vitals.
• Карточки: Карточки продуктів та знімки виглядають однорідно, коли вони мають одне й те саме співвідношення аспектів у ґріді.
• Героїчні секції: Широкі банери часто використовують співвідношення аспектів, наприклад 3:1 або 4:1, щоб підтримувати візуальну рівновагу на різних екранах.

HTML-елемент <img> також підтримує атрибути width і height, які вказують браузеру про співвідношення аспекту зображення перед його завантаженням, що зменшує зміщення розмітки. Встановіть ці атрибути завжди — браузери використовують їх для резервування правильного місця навіть перед завантаженням файлу.

Аспектні співвідношення для соціальних мереж

Кожна соціальна мережа має рекомендації щодо співвідношень аспектів для різних видів вмісту. Використання неправильного співвідношення призводить до обрізання, чорних смуг або втрати якості вмісту. Нижче наведено повний перелік:

Для максимальної взаємодії завжди створюйте вміст за рекомендаціями платформи щодо співвідношення аспекту та роздільної здатності. Завантаження високоякісних файлів (наприклад, 4K для YouTube) дозволяє платформі забезпечувати найкращу якість для переглядачів на великих екранах, а потім автоматично зменшувати їх для користувачів мобільних пристроїв.

Математика за заднім фоном співвідношення аспекту

Підрахунок простих співвідношень аспекту передбачає знаходження найбольшого спільного ділення (НСД) ширини та висоти, потім ділення обох значень на нього. НСД обчислюється за допомогою алгоритму Євкліда — однієї з найстаріших алгоритмів у математиці, що датує 300 рік до нашої ери.

Шаговий приклад для 1920 × 1080:

• НСД(1920, 1080): 1920 mod 1080 = 840
• НСД(1080, 840): 1080 mod 840 = 240
• НСД(840, 240): 840 mod 240 = 120
• НСД(240, 120): 240 mod 120 = 0 → НСД = 120

Ділимо: 1920 ÷ 120 = 16, 1080 ÷ 120 = 9 → Співвідношення = 16:9

Для нестандартних розмірів, наприклад 1366 × 768 (вельми поширений розмір екрану ноутбука), НСД становить 2, що дає 683:384 — що не можна виразити у чистому співвідношенні. У практиці ця роздільна здатність наближається до 16:9 (точне 16:9 за шириною буде 1366 × 768,375). Виробники округлюють до цілих пікселів, тому деякі "16:9" екрани мають трохи погані співвідношення.

Десяткове співвідношення (ширина ÷ висота) є ще однією корисною формою вираження співвідношень аспекту. Воно робить порівняння легшим: 16:9 = 1,778, 4:3 = 1,333, 21:9 = 2,333. Higher десятичне значення означає ширшу прямокутну форму.

Пов'язок сторінок у фотографії та друку

Пов'язок сторінок у фотографії впливає на композицію, рамку та спосіб друку чи відображення зображень. Найпоширеніші співвідношення сенсорів та друку включають:

При друку зображень, коли співвідношення сторінок не збігаються, відбувається обрізання. Фото 3:2, друкуване на 8×10" (що є 5:4), втрачає частини зображення. Професійні фотографи планують свої композиції з урахуванням кінцевого виходу співвідношення сторінок, або вони роблять ширші знімки і обрізають їх після виробництва для відповідності формату призначення.

Міжнародний стандарт паперу (ISO 216) використовує унікальний співвідношення √2:1 (приблизно 1,414:1). Це означає, що розкриття A4 листа в півтора рази створює лист A5 з тією ж пропорцією — математично витончена властивість, якої немає у жодного іншого співвідношення. Коли створюєте матеріали для друку, завжди перевірте, чи ваша цифрова картина збігається зі співвідношенням сторінок цілісного паперу перед початком роботи — зміна його пізніше означає перезавантаження всього макета.

Професійні фотографи, які роблять події чи портрети, часто використовують 3:2 в камері, але надають кінцеві зображення у декілька співвідношень для відповідності різним виходам: 3:2 для друку 4×6, 5:4 для друку 8×10, 16:9 для слайд-шоу та 1:1 для профільних зображень у соціальних мережах. Планування декількох виходів з початку роботи — залишення додаткового місця навколо об'єкта — називається «зніманням вільно» і є найкращою практикою у комерційній фотографії.