Калкулатор за сооднос на страни

Како да го користите калкулаторот за сооднос на страни

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).