Однажды я отправил тему WordPress, где каждое избранное изображение на мобильном телефоне выглядело так, будто проходило через ловушку. Лица растянуты, логотип раздавлен. Причиной стали три символа в файле CSS: height: 240px Сидя рядом с width: 100%. На 375-пиксельном телефоне, который выдавал соотношение примерно 1,56:1, а изображения были 16:9 - 1,78:1. Не огромная разница на бумаге. Очень очевидно на человеческом лице.
Соотношение сторон — одна из тех вещей, которые кажется слишком простыми, чтобы ошибиться, поэтому никто не проверяет это. Это одно подразделение. И все же он тихо портит экспорт видео, превью OpenGraph, которые обрезаются не в том месте, миниатюры с черными полосами и изображения Hero, которые отлично смотрятся на вашем 27-дюймовом мониторе и ужасны на телефоне. Математика тривиальна, а стоимость ошибки округления — нет.
я строю Toolz.dev и я делаю этот расчет постоянно - размер изображений для плагина и #39;s экраны администратора, экспортируя видео в формате Reels, выясняя, каким на самом деле должно быть изображение OpenGraph. Итак, я построил Калькулятор соотношения сторон Сделать это в одной области и показать ее работу. Дайте ему соотношение и одно измерение, оно дает вам другое. Придайте ему размер, он сводит его к соотношению и сообщает вам, как называется это соотношение.
TL;DR: Соотношение сторон – ширина, делимая на высоту, записанную в виде двух чисел с двоеточием. Чтобы найти недостающую высоту:
width × (ratioHeight ÷ ratioWidth), йо- Чтобы найти недостающую ширину:height × (ratioWidth ÷ ratioHeight). Чтобы получить соотношение от размера, разделите оба числа на их наибольший общий делитель - 1920 и 1080 имеют общий НОД 120, что дает 16:9. The Калькулятор соотношения сторон Делает все три в вашем браузере, с пресетами для 16:9, 9:16, 1:1, 4:3, 3:2, 21:9, 1.91:1 и 2.39:1.
Что такое соотношение сторон?
Соотношение сторон - это пропорциональное соотношение между шириной изображения и #39;s и его высотой. Оно записывается как два числа, разделенные двоеточием - 16:9, 4:3, 1:1 - и то, что оно описывает фасон, не размер.
Это различие - вся игра. 1280 × 720, 1920 × 1080, и 3840 × 2160 - это три разных разрешения с одним соотношением сторон Они имеют одинаковую форму в трех размерах, из-за чего любой из них масштабируется в любой другой без искажений и обрезки. Между тем 1920 × 1080 и 1920 × 1200 имеют почти одинаковую ширину, отличаются на 120 пикселей высоты, и принципиально разные формы - один 16:9, другой 16:10, и помещая контент, предназначенный для одного, в контейнер, построенный для другого означает букбоксинг или обрезку.
Отношение равно шириной ÷ высота, выраженная в виде дроби в младших слагаемых. 1920 ÷ 1080 = 1,777…, а дробь 1920/1080 уменьшается до 16/9. Оба являются одним и тем же фактом двумя способами: десятичной форме легче сравнить (1,78 шире 1,5? Очевидно), и форму толстой кишки проще сказать.
Три расчета, которые вам действительно нужны
Решение для недостающего измерения
Вы знаете форму и одну сторону. это самый распространенный случай на практике: & quot; Мне нужно изображение 16:9 и мой контейнер 1280 пикселей шириной - какой высоты?& quot;
height = width × (ratioHeight ÷ ratioWidth)
= 1280 × (9 ÷ 16)
= 720
И в другом направлении:
width = height × (ratioWidth ÷ ratioHeight)
= 1080 × (16 ÷ 9)
= 1920
В калькуляторе выберите предустановку или введите соотношение, заполните известное измерение, оставьте другой пустой и нажмите «Посчитать». Он заполняет пустое поле и показывает арифметику под ним.
Сокращение размера к его соотношению
У вас есть размер, и вы хотите знать его форму - обычно чтобы проверить соответствие двух активов или выяснить, что на самом деле представляет собой клиент и экспорт #39;s с загадочными размерами.
Метод является самым большим общим делителем. Найдите наибольшее число, которое делит оба измерения поровну и делите по ним оба. Для 1920 и 1080 это число 120: 1920 ÷ 120 = 16, 1080 ÷ 120 = 9. Соотношение 16:9.
Здесь интересные ответы становятся интересными, потому что часто делаются реальные размеры. не уменьшить до удобного для маркетинга соотношения. ультраширокий монитор 3440 × 1440 уменьшается до 43:18. один 2560 × 1080 уменьшается до 64:27. оба продаются как & quot;21:9 & quot; и ни один из них на самом деле не будет - 21:9 будет 3360 × 1440. метка представляет собой округление десятичной дроби (≈2,39:1 и ≈2,37:1) в нечто, что звучит аккуратно рядом с 16:9. калькулятор дает вам истинное приведенное соотношение и десятичную дробь, так что вы можете размер из реальности, а не из листа спеклейки.
Масштабирование и подгонка
Два варианта одной и той же идеи. шелушение умножает оба измерения на один и тот же коэффициент, который по определению сохраняет соотношение - 50% шкала 1920 × 1080 равна 960 × 540, всё ещё 16:9. приспоса Уменьшает размер источника, пока он не окажется внутри ограничивающей рамки без искажения: возьмите меньшую boxWidth ÷ sourceWidth а boxHeight ÷ sourceHeight и масштабировать по этому. Фото 4000 × 3000, вставленная в коробку размером 1200 × 1200, 1200 × 900. это именно то, что CSS object-fit: contain Делает и что именно делает CDN изображения, когда вы запрашиваете изменение размера максимального измерения.
Основные характеристики калькулятора соотношения сторон
Десять пресетов, помеченных с указанием того, где они на самом деле используются
16:9 для стандартного видео и большинства дисплеев. 9:16 для барабанов, шорт, тикток и историй. 1:1 для квадратных сообщений и аватаров. 4:3 для старых дисплеев и iPad. 3:2 для фотосъемки DSLR и 35-мм пленки. 2:3 для портретных принтов. 5:4 для 8х10 отпечатков. 21:9 для ультраширока. 1.91:1 Для изображений OpenGraph Link-Preview 2.39:1 Для анаморфного широкоформатного. Наведение на наведение предустановки говорит вам, для чего он нужен, что важнее, чем число, когда вы пытаетесь вспомнить, какой именно Instagram хочет.
формула под каждым ответом
На панели результатов показана точная арифметика - 1280 × (9 ÷ 16) = 720, йо- Отчасти, чтобы вы могли проверить это, отчасти, чтобы вы могли поднять его в электронную таблицу или скрипт. Если вы собираетесь жестко закодировать измерение в файл CSS или конфигурацию Tailwind, вы должны увидеть, откуда взялось этот номер.
Уменьшенное соотношение, десятичное и название
Каждый результат сообщает все три представления: уменьшенное целочисленное отношение (16:9), его десятичную форму (1.778:1) и общее имя, если оно имеет. Десятичное — это то, с чем вы сравниваете; название — это то, что вы вводите в краткое описание.
Мегапиксели и общее количество пикселей
Каждый результат включает в себя количество пикселей в мегапикселях. это число, которое на самом деле предсказывает использование памяти и размер файла, когда вы изменяете размер изображений - фотография 4000 × 3000 составляет 12 МП, и удвоение ее размеров в четыре раза превышает это значение до 48 МП, а не удваивает его. Если вы создаете адаптивные наборы изображений, то квадратичное соотношение - это то, что нужно держать в голове. Когда вы закончите калибровку, Изменение размера изображения а Изображение компресс Выполняйте настоящую работу, в браузере.
превью живой формы
Прямоугольник в панели результатов, нарисованный на соотношение, которое вы только что рассчитали. это звучит декоративно, и это не так - самый быстрый способ поймать, который вы набрали 9:16, когда вы имели в виду 16:9, - это посмотреть на высокий ящик, когда вы ожидали широкого.
Клиентская, автономная, без регистрации
Обычная арифметика JavaScript в вашем браузере. Ничто никуда не отправляется, ничего не записано, и страница продолжает работать с выключенной сетью.
Какое соотношение сторон следует использовать?
| отношение | десятичный | где он используется | Типичный размер пикселя |
|---|---|---|---|
| 16:9 | 1,778 | YouTube, HD/4K видео, большинство мониторов, телевизоров | 1920 × 1080, 3840 × 2160 |
| 9:16 | 0,563 | Ролик в Instagram, TikTok, шорты на YouTube, истории | 1080 × 1920 |
| 1:1 | 1,0 | Посты в Instagram, аватары, миниатюры продуктов | 1080 × 1080 |
| 4:5 | 0,8 | Пост с портретом в Instagram (самое большое количество ленты) | 1080 × 1350 |
| 1.91:1 | 1,91 | OpenGraph / Предварительный просмотр ссылок на карту T | 1200 × 630 |
| 4:3 | 1.333 | iPad, старые мониторы, много датчиков камеры | 2048 × 1536 |
| 3:2 | 1,5 | DSLR и беззеркальные кадры, 35-мм пленка, фотопринты | 6000 × 4000 |
| 21:9 (На самом деле ~2,37–2,39:1) | ~2,38 | Сверхширокие мониторы, кинематографические культуры | 3440 × 1440 |
| 2.39:1 | 2,39 | Анаморфотный широкоэкранный кинотеатр | 4096 × 1716 |
Две практические заметки. 1200 × 630 Размер OpenGraph уменьшается до 40:21, десятичная дробь 1.905 - достаточно близко к 1.91:1, что все так называют, и это размер Facebook, LinkedIn, и X все рендеринг чисто Проверьте результат с Открыть предварительный просмотр графика Инструмент перед отправкой, потому что плохо обрезанное изображение является наиболее заметной ошибкой в ссылке, которую никто не нажимает. А 4:5 стоит знать конкретно для инстаграма: он занимает больше вертикального пространства в ленте, чем 1:1, что является свободным вниманием.
Общие варианты использования
Размеры адаптивных изображений без искажений
Вы строите сетку карт, и дизайн требует миниатюр 16:9 с шириной контейнера 384 пикселей. Рассчитать: 384 × 9 ÷ 16 = 216. Теперь у вас есть конкретный размер для обоих CSS aspect-ratio: 16 / 9 декларация и ваш экспорт изображений, и они согласны друг с другом Современный CSS делает это проще, чем раньше - aspect-ratio в CSS напрямую принимает соотношение и позволяет браузеру выполнять арифметику, но вам все равно нужны размеры пикселей для самого актива.
Экспорт видео для конкретной платформы
Вы снимали 16:9 и вам нужен вертикальный разрез 9:16. высота остается на уровне 1920, поэтому ширина равна 1920 × 9 ÷ 16 = 1080. таков размер вашего экспорта - и причина, по которой цифры выглядят знакомыми, заключается в том, что 1080 × 1920 - это просто 1920 × 1080 с поменявшимися осями, что и есть & quot;вертикальное видео& quot; означает.
Одна вещь, которую калькулятор не сделает для вас: H.264 требует ровных размеров. Если ваша математика приземляется на нечетное число, округляйте нечетную сторону на один пиксель, иначе ваш энкодер откажется от работы.
Выяснение того, что такое загадочный актив на самом деле
Клиент отправляет активы по 1440 × 1800 и спрашивает, почему они плохо обрезаются на домашней странице.Уменьшите это: GCD 1440 и 1800 это 360, давая 4:5.У вас слоты домашней страницы 16:9.Эти две формы не могут быть удовлетворены обе без обрезки - теперь у вас есть конкретный ответ и решение принять, а не смутное ощущение, что что-то не так.
проверка соответствия набора активов
Перед запуском запустите размеры каждого образа героя в режиме RATIO. Если один из тридцати возвращается как 1.6:1, а остальные 1.778:1, вы нашли актив, который будет выглядеть неправильным на действующем сайте, и вы нашли его раньше, чем пользователь.
Технические примечания, которые стоит знать
округление. Большинство вычислений отношения не приземляются на целые пиксели. 16:9 при ширине 1000 дает высоту 562.5. калькулятор округляется до ближайшего целого пикселя, поэтому вы получаете 563 - форму, которая составляет 1.7762:1, а не 1.7778:1, разница примерно в одну десятую одного процента, и невидимый. не гонитесь за ним. обратите внимание, что последовательно округление вниз В наборе изображений может накапливаться видимый дрейф, если вы складываете элементы, округляйте из исходного измерения каждый раз, а не по предыдущему результату.
Соотношение сторон пикселей и соотношение сторон отображения. В широковещательном видео они могут отличаться: старые видеоматериалы DV сохранили 720 × 480 пикселей, но отображали их как 4:3, делая каждый пиксель неквадратным. Почти ничто из того, к чему вы прикасаетесь сегодня, не делает этого - все в квадратных пикселях - но если вы работаете с устаревшими кадрами, а математика отказывается складываться, вот почему.
aspect-ratio в КСС. С 2021 года можно писать aspect-ratio: 16 / 9 И пусть браузер сохраняет форму, пока одно измерение является текучим. ИСПОЛЬЗУЙТЕ Э Он удаляет целый класс взломов с верхним процентом отступов, которые раньше были необходимы, и это означает, что ваш макет остается правильным на ширине, которую вы никогда не тестировали. Вам все еще нужен калькулятор для экспорта активов, потому что файл изображения должен быть реальным количеством пикселей.
Обрезка не масштабируется. Если соотношение источника и цели различается, вы не можете изменить размер между ними - вы должны обрезать, почтовый ящик или искажать. Выбирайте намеренно. object-fit: cover урожай (и обычно это то, что вы хотите для фотографий), contain почтовые ящики (обычно то, что вы хотите для логотипов) и fill искажает (почти никогда не хочется, а причина моей ошибки в искажении лиц в верхней части этой статьи).
часто задаваемые вопросы
Как рассчитать соотношение сторон по ширине и высоте?
Разделите оба числа на их наибольший общий делитель. Для 1920 × 1080 GCD составляет 120, поэтому соотношение снижается до 16:9. Переключите этот калькулятор, чтобы получить режим соотношения, введите оба измерения, и он выполняет уменьшение и назовет соотношение для вас.
Какой рост мне нужен для изображения 16:9 шириной 1280 пикселей?
Умножьте ширину на 9 и разделите на 16: 1280 × 9 ÷ 16 = 720. Таким образом, изображение 1280 пикселей 1280 пикселей — 720 пикселей в высоту. Введите 16:9, ширину 1280, чтобы подтвердить это.
В чем разница между соотношением сторон и разрешением?
Соотношение сторон - это форма - соотношение ширины к высоте Разрешение - это фактическое количество пикселей. 1280 × 720 и 1920 × 1080 - это разные разрешения с одинаковым соотношением сторон 16:9, поэтому один масштабируется на другой без искажений и обрезки.
Какое соотношение сторон я должен использовать для социальных сетей?
Используйте 1:1 или 4:5 для сообщений в ленте Instagram, 9:16 для катушек, историй, TikTok и короткометражек YouTube, 16:9 для стандартного видео YouTube и 1,91:1 для открытый график предварительный просмотр изображений ссылок на Facebook, LinkedIn и X. Пресеты этого инструмента включают все это.
Почему мое изображение измененного размера выглядит растянутым?
Новая ширина и высота не соответствуют исходному соотношению, поэтому изображение сжимается по одной оси. Рассчитайте целевую высоту по целевой ширине, используя исходное соотношение, а не печатайте оба числа вручную - именно для этого и предназначен режим "решение для пропавшей".
Что на самом деле означает 21:9?
Это маркетинговая этикетка для сверхшироко-дисплеев. Соотношение истинного для монитора 3440 × 1440 составляет 43:18, примерно 2,39:1, а панель 2560 × 1080 — 64:27. Оба округляются до "21:9» в списках продуктов. Если вам нужны точные размеры пикселя, вычислите по реальному разрешению панели, а не на метке.
Как сохранить соотношение сторон, когда результат не является целым числом?
Калькулятор округляется до ближайшего целого пикселя, который на практике вводит не более полупикселя дрейфа - невидимого. Видеокодеры более строгие: H.264 требует четных размеров, поэтому округляйте нечетную сторону вниз на один пиксель, если кодер отклоняет ваш размер.
Этот калькулятор работает в автономном режиме?
да. Каждый расчет — это простая арифметика JavaScript, работающая в вашем браузере. На сервер не отправляются никакие размеры, ничего не регистрируется, а инструмент продолжает работать без подключения к Интернету после загрузки страницы.
Связанные инструменты
- Изменение размера изображения- примените только что рассчитанные размеры в браузере
- Изображение компресс- уменьшите файл, как только форма станет правильной
- калькулятор процента- для каждой половины работы
- Открыть предварительный просмотр графика- проверьте это изображение 1.91:1 перед отправкой ссылки
- конвертер формата-- webp и AVIF для активов, которые вы только что оценили
Дополнительное чтение: Полное руководство по сжатию изображений а Основные инструменты для создания изображений для Интернета, йо-
