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

Як користуватися калькулятором співвідношення сторін

1. Виберіть одне з Поширені співвідношення (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) або введіть власні значення в полі Співвідношення або вихідний розмір. Можна ввести співвідношення (16 і 9) або справжні розміри зображення, відео чи екрана (1920 і 1080).
2. Перегляньте результати: Спрощене співвідношення, Десяткове співвідношення (ширина, поділена на висоту), Орієнтацію та Найближчий стандарт. Знак «≈» означає, що ваш розмір близький до цього стандарту, але не збігається з ним точно.
3. У розділі Новий розмір (зі збереженням співвідношення) введіть Нова ширина, щоб отримати відповідну висоту, або Нова висота, щоб отримати ширину. Рядок нижче показує обчислення. Зніміть позначку Округлити до цілих пікселів, якщо потрібне точне значення, наприклад для розмірів друку в міліметрах.
4. Кнопка Поміняти ширину й висоту місцями перетворює альбомне співвідношення на книжкове (16:9 стає 9:16) і навпаки.
5. У Попередній перегляд малюється прямокутник із вашим співвідношенням, а таблиця показує розмір кожного поширеного співвідношення для вашої нової ширини.
6. Скопіюйте CSS-код кнопкою Копіювати.

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

Як працює обчислення

Співвідношення сторін – це ширина, поділена на висоту, записана двома цілими числами. Щоб спростити його, інструмент ділить обидві частини на їхній найбільший спільний дільник (НСД): НСД чисел 1920 і 1080 дорівнює 120, тому 1920:1080 = 16:9. Десяткові значення спершу множаться на степінь десяти (2,39:1 стає 239:100).

Щоб змінити розмір зі збереженням пропорцій, достатньо правила трьох:

• нова висота = нова ширина × вихідна висота ÷ вихідна ширина
• нова ширина = нова висота × вихідна ширина ÷ вихідна висота

Приклад: відео 16:9 завширшки 1280 px має висоту 1280 × 9 ÷ 16 = 720 px.

Деякі екрани мають «непарні» співвідношення. Ноутбук 1366 × 768 спрощується до 683:384, тобто 1,779:1, що лише трохи відрізняється від 16:9 (1,778:1), тому показано «≈ 16:9». Монітори, що продаються як 21:9, насправді мають формат 64:27 (2560 × 1080) або 43:18 (3440 × 1440), тому в таблиці є обидва.

CSS-властивість aspect-ratio

Запис aspect-ratio: 16 / 9; каже браузеру самому обчислити відсутній розмір: за width: 100% висота підлаштується автоматично, а блок масштабуватиметься разом із контейнером. Властивість працює в усіх сучасних браузерах (з 2021 року) і чудово підходить для вбудованих відео, карток, заглушок зображень і мініатюр. Поєднайте її з object-fit: cover для зображень, щоб кадрувати, а не розтягувати.

У коді також є давніший прийом із padding-top як запасний варіант: відсоткове значення padding обчислюється від ширини, тож padding-top: 56.25% (9 ÷ 16) резервує область 16:9, а вміст абсолютно позиціонується всередині. Він потрібен лише для дуже старих браузерів.

Якщо заздалегідь зарезервувати місце за допомогою співвідношення, під час завантаження зображень і відео сторінка не «стрибатиме», а це покращує показник Cumulative Layout Shift (CLS).