Калкулатор на съотношение на страните

Как да използвате калкулатора на съотношение на страните

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-top: 56.25% (9 ÷ 16) заделя област 16:9, а съдържанието се позиционира абсолютно вътре в нея. Нужна ви е само за съвсем стари браузъри.

Резервирането на място със съотношение предотвратява и разместването на оформлението, докато се зареждат изображения и видеа, което подобрява показателя Cumulative Layout Shift (CLS).