Новый размер при том же отношении сторон
Прямоугольник кадра сохраняет пропорцию: ширина к высоте после масштаба равна ширине к высоте до масштаба. Раздел: веб и изображения.
Контроль: 1920×1080, новая высота 720 → ширина 1280. Обратно исходная ширина 1920. Квадрат 100×100 в высоту 50 → ширина 50. Кадр 800×600 в ширину 400 → высота 300.
Все четыре стороны строго больше нуля. Родитель практика.
w₂ / h₂ = w₁ / h₁
w₂ = w₁ · h₂ / h₁
Четыре величины. Искомое — любая сторона. Нуль любой из четырёх — отказ, даже если вы не делите именно на неё в выбранном ходе: нулевая сторона ломает кадр.
Не мегапиксели и не CSS rem
Не произведение сторон на миллион: 1920×1080 даёт около 2,07 Мп, а эта страница про 16:9. Не перевод кегля. Не цвет #RRGGBB. Не площадь в метрах: пиксели кадра не квадратные метры комнаты. Не голое a/b без пары «было / стало».
Как пользоваться
Четыре поля. Зафиксируйте исходный кадр w₁ и h₁. Задайте одну новую сторону — получите вторую. Если известны оба новых размера и одна исходная сторона, восстановите вторую исходную: проверка, что ролик не сплющили.
Примеры
1. Ширина под высоту. 1920, 1080, 720 → 1280.
2. Высота под ширину. 800×600 → 400 по ширине даёт 300.
3. Исходная ширина. 1280×720 и h₁ = 1080 → w₁ = 1920.
4. Квадрат. 100×100 → 50×50.
5. Запрет. h₁ = 0.
Ещё задачи
Превью 320 px по ширине для ролика 1920×1080: h₂ = 1080 · 320 / 1920 = 180. Это не «обрезать до квадрата».
Вертикальный сторис 1080×1920 в ширину 540 → высота 960. Не кладите горизонтальный 16:9 в те же поля, если исходник уже 9:16.
Кадр 4096×2160 (примерно 17:9 DCI) в высоту 1080: w₂ = 4096 · 1080 / 2160 ≈ 2048. Это не Full HD 1920.
Связь с отношением: r = 1920/1080 = 16/9. Страница пропорций не сокращает дробь и не показывает «16:9» текстом — она масштабирует стороны.
Два шага: сначала подогнали ширину, потом ещё раз высоту другим числом — второе действие ломает первое, если не держать ту же пару w₁ h₁.
Не умножайте обе стороны на разные коэффициенты «на глаз» и не ждите, что страница это исправит: она считает одну неизвестную.
Иконка 512×512 в 24 px: обе стороны 24, потому что квадрат. Не 24×16.
Время загрузки от пропорций не зависит: вес файла — про байты, не про 16:9.
Печать «вписать в лист»: сначала дюймы и DPI, не эта страница сторон растра.
Валюта пикселей одна: не смешивайте CSS px макета с «логическими пунктами» телефона без оговорки, что считаете именно пиксели растра.
Подобие прямоугольников
Чертёж: большой прямоугольник 16 на 9 клеток и маленький с тем же отношением. Диагонали совпадают по направлению, не по длине.
Памятка: крест отношений, не площадь, не сумма сторон.
Хаб веба ставит кадр рядом с мегапикселями, чтобы не склеить «сколько точек» и «какой формат».
Итог: четыре положительные стороны, нуль нельзя, обрезка вручную.
Поля и обрезка
Вписать 16:9 в квадрат 1080×1080 без растяжения: по формуле высота при ширине 1080 была бы 1080 · 1080 / 1920 = 607,5 — картинка не заполнит квадрат. Оставшиеся поля — letterbox в тетради, страница полей не рисует.
Заполнить квадрат целиком: обрежьте лишнее с боков, не меняя отношение исходника. Обрезка — другой запрос: вы выбираете новое окно внутри кадра, затем уже масштабируете это окно.
Родитель практика. Сосед по пиксельной сетке: MP.
Итог журнала: w₂/h₂ = w₁/h₁, не crop, не cover без обрезки.
Контроль: 1280 из 1920, 1080 и 720. 300 из 800, 600 и 400.
Пример: 1280×720 в высоту 90 (превью полоски) → ширина 160.
Не подставляйте дюймы монитора вместо пикселей, если считаете растр.
Рабочий пример: w₂ = 640, h₂ = 360, h₁ = 1080 → w₁ = 1920. Проверка исходника.
Связь с площадью прямоугольника: A = w·h в пикселях — это уже сосед мегапикселей, если разделить на миллион. Здесь A не считается.
Итог для отчёта: одинаковое отношение, одна неизвестная сторона, без полей внутри формулы.
Финальный якорь: 1920×1080 → 1280×720. Нуль стороны запрещён.
Добор: не называйте это «сжать JPEG».
Ещё якорь: 4:3. 1024×768 в ширину 800 → высота 600.
Журнал: баннер 728×90 — Ultra-wide, не 16:9. Подогнать высоту 45 → ширина 364. Не «как Full HD».
Не путайте с процентом: уменьшить на 50% обе стороны — это коэффициент 0,5, страница принимает уже новые числа, процент сама не берёт.
Финальный блок: подобие кадра, четыре поля, без альфы цвета, без DPI.
Ещё контроль: портрет 600×800 в ширину 150 → высота 200.
Почему не умножить только ширину? Тогда отношение ломается: 1920×1080 в ширину 1280 при той же высоте 1080 — уже не 16:9, а узкая полоса. Формула как раз запрещает забыть вторую сторону.
Итог абзаца: две пары сторон, одно отношение, масштабирование, не искажение.
Связь с HEX: цвет пикселя к геометрии кадра не относится.
Два исходника в коллаже: каждый своим w₁ h₁, затем общая ширина холста — в тетради сумма, не одно поле.
Финальный добор: пропорции кадра, не Мп, не rem, не площадь комнаты, не голый ratio без «было/стало».
Отчёт: «подогнали под 720p» без 1920 и 1080 не проверить. Запишите 1920×1080 → 1280×720.
Стык с rem: 16 px корня не сторона картинки.
Не кладите мегапиксели в h₂.
Якорь: 1280; 300; 1920 обратно; квадрат 50. Нуль h₁ нельзя.
Приложение: слайд 1920×1080 в колонку блога шириной 720 → высота 405. Это не «Full HD в статье», это превью.
Нецелая сторона 1280,25 после деления: растр обычно округляют до целого пикселя в редакторе. Страница даёт точное рациональное число, округление — ваше.
Повторный расчёт после обрезки: новые w₁ h₁ — уже обрезанное окно, не исходный файл с полями.
Типичные ошибки
- Менять одну сторону и оставлять вторую как было.
- Путать с мегапикселями.
- Класть CSS rem в сторону кадра.
- Ждать letterbox внутри формулы.
- Нулевая сторона.
Соседи: отношение, мегапиксели, px/rem, площадь прямоугольника, HEX.
Телефон «2×» зум: оптика не эта страница. Здесь только арифметика сторон растра.
Итог добора: одинаковое отношение сторон двух прямоугольников, четыре положительных поля, без обрезки внутри формулы, без DPI печати.
Частые вопросы
- Как подогнать ширину, не растянув кадр?
- w₂ = w₁ · h₂ / h₁. Кадр 1920×1080 в высоту 720 даёт ширину 1280.
- Это отношение двух любых чисел?
- Отношение a/b не знает, что a и b — стороны одного прямоугольника. Здесь четыре поля кадра.
- Сколько пикселей всего?
- Мегапиксели считают w·h/10⁶. Пропорции площадь не выдают.
- Нулевая высота?
- Ошибка. Делить на нулевую сторону нельзя.
- Это px в rem?
- rem = px / base про кегль корня, не про отношение сторон картинки.
- Где хаб?
- Веб и изображения.
Источники
- Учебные определения: пропорции кадра, CSS rem от корневого кегля, t = размер/скорость, sRGB-каналы 0…255, мегапиксель = w·h/10⁶, дюйм печати = пиксели/DPI, объём = скорость×время.