Калькулятор соотношения сторон - поддерживайте пропорции

Что такое пропорция?

An соотношениеявляется пропорциональным соотношением между шириной и высотой, выраженным в виде двух чисел, разделенных точками (W: H). Определяет форму прямоугольника - широкий, высокий или квадратный - без указания фактических размеров. Соотношение сторон является фундаментальным для фотографии, видеографии, графического дизайна, веб-разработки и изготовления дисплеев.

Этот калькулятор уменьшает любую пару ширины х высоты до ее простейшего соотношения с использованием алгоритма величайшего общего делителя (GCD). Он также рассчитывает правильную новую высоту, когда вы хотите масштабировать на другую ширину, гарантируя, что ваши изображения и видео никогда не будут выглядеть растянутыми или искаженными.

Например, 1920 x 1080 и 3840 x 2160 имеют одинаковое соотношение сторон 16:9 - они отличаются только разрешением. Понимание этого различия имеет решающее значение для всех, кто работает с цифровыми медиа, потому что поддержание соотношения сторон во время изменения размера предотвращает визуальное искажение, известное как "сдавление" или "растяжение".

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

Общие пропорции аспектов и их использование

В таблице ниже приведены наиболее широко используемые соотношения с их типичными приложениями, чтобы вы могли быстро определить, какое из них подходит для вашего проекта.

Киноиндустрия использует несколько специализированных соотношений сторон за пределами стандартных телевизионных форматов. Соотношение Академии (1.375:1) доминировало в раннем кинематографе, в то время как современные блокбастеры обычно используют либо 1.85:1 (плоский широкоэкранный) или 2.39:1 (анаморфный диапазон). IMAX использует 1.43:1, который намного выше, чем стандартный широкоэкранный - именно поэтому сцены IMAX чувствуют себя захватывающими.

Как изменить размер при сохранении пропорции

Изменение размера изображения или видеокадра при сохранении его соотношения сторон требует фиксации одного измерения и пропорционального вычисления другого.

• Известная новая ширина, решить на высоту:Новая высота = (первоначальная высота х новая ширина) ÷ первоначальная ширина
• Известная новая высота, решить для ширины:Новая ширина = (первоначальная ширина х новая высота) ÷ первоначальная высота

Пример 1:Изменить размер изображения 1920 x 1080 до ширины 1280 пикселей:
Новая высота = (1080 x 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) включает в себя переключатель "lock aspect ratio" или "constrain proportions". Когда он включен, изменение одного измерения автоматически корректирует другое. Однако, если вам нужно рассчитать размеры перед открытием редактора - или вы работаете с CSS, отзывчивыми изображениями или настройками кодирования видео - этот калькулятор дает вам точные значения мгновенно.

Соотношение сторон в веб-дизайне и CSS

Современная веб-разработка в значительной степени опирается на соотношение сторон для адаптивных макетов.aspect-ratioproperty (поддерживается во всех современных браузерах с 2021 года) позволяет напрямую определять пропорции ящика:

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

Это создает отзывчивый контейнер, который всегда поддерживает соотношение 16:9 независимо от ширины окна просмотра - больше нет подкладки.

• Встроенные видео:Встраивания YouTube и Vimeo требуют контейнеров 16: 9, чтобы избежать letterboxing или обрезки.
• Защитные знаки изображения:Настройка соотношения сторон перед загрузкой изображения предотвращает Cumulative Layout Shift (CLS), ключевой показатель Core Web Vitals.
• Размещение карт:Карты продуктов и миниатюры выглядят одинаково, когда они имеют одинаковое соотношение сторон по сетке.
• Секции героев:Баннеры полной ширины часто используют соотношения сторон, такие как 3:1 или 4:1 для поддержания визуального баланса на экранах разных размеров.

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

Соотношение сторон для социальных сетей

Каждая платформа социальных сетей рекомендует соотношение сторон для различных типов контента. Использование неправильного соотношения означает, что ваш контент будет обрезан, помещен в почтовый ящик или потеряет качество. Вот всеобъемлющая справка:

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

Математика, лежащая в основе расчета пропорций

Для вычисления упрощенного соотношения сторон необходимо найтиНаибольший общий делитель (GCD)GCD рассчитывается с помощью алгоритма Евклида - одного из старейших алгоритмов в математике, датируемого 300 годом до нашей эры.

Шаг за шагом пример для 1920 х 1080:

• GCD ((1920, 1080): 1920 mod 1080 = 840
• GCD ((1080, 840)): 1080 mod 840 = 240
• GCD ((840, 240)): 840 mod 240 = 120
• GCD ((240, 120)): 240 mod 120 = 0 -> GCD = 120

Разделите: 1920 ÷ 120 = 16, 1080 ÷ 120 = 9 -> Соотношение =16:9 (англ.)

Для нестандартных размеров, таких как 1366 x 768 (очень распространенное разрешение ноутбука), GCD равен 2, что дает 683:384 - что не упрощает чистое соотношение. На практике это разрешение приближается к 16:9 (точный 16:9 при этой ширине будет 1366 x 768.375). Производители округляют целые пиксели, поэтому некоторые экраны "16:9" имеют немного несовершенные соотношения.

Вдесятичное соотношение(ширина ÷ высота) является еще одним полезным способом выражения соотношения сторон.

Соотношение сторон в фотографии и печати

Соотношение сторон фотографии влияет на композицию, обрамление и на то, как изображения печатаются или отображаются.

Профессиональные фотографы планируют свои композиции с учетом конечного выходного соотношения, или они снимают шире и режут в пост-производстве, чтобы соответствовать целевому формату.

Международный стандарт бумаги (ISO 216) использует уникальное соотношение √2:1 (примерно 1,414:1). Это означает, что сложение листа А4 пополам производит лист А5 с одинаковыми пропорциями - математически элегантное свойство, которым не обладает ни одно другое соотношение. При проектировании для печати всегда проверяйте, что ваше цифровое полотно соответствует соотношению сторон целевой бумаги перед началом - изменение его позже означает перекомпозицию всего макета.

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