Calculator raport de aspect

Cum folosești calculatorul de raport de aspect

1. Alege unul dintre Rapoarte uzuale (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) sau scrie propriile valori în Raport sau dimensiune originală. Poți introduce un raport (16 și 9) sau dimensiunile reale ale unei imagini, ale unui videoclip ori ale unui ecran (1920 și 1080).
2. Citește rezultatele: Raport simplificat, Raport zecimal (lățimea împărțită la înălțime), Orientare și Cel mai apropiat standard. Semnul „≈” arată că dimensiunea ta este aproape de acel standard, dar nu identică.
3. La Dimensiune nouă (păstrează raportul) scrie o Lățime nouă ca să obții înălțimea corespunzătoare sau o Înălțime nouă ca să obții lățimea. Rândul de dedesubt arată calculul. Debifează Rotunjește la pixeli întregi dacă ai nevoie de valoarea exactă, de exemplu pentru dimensiuni de tipar în milimetri.
4. Butonul Inversează lățimea și înălțimea transformă un raport orizontal în unul vertical (16:9 devine 9:16) și invers.
5. Previzualizare desenează un dreptunghi cu raportul tău, iar tabelul listează dimensiunea fiecărui raport uzual la lățimea nouă.
6. Copiază Cod CSS cu butonul Copiază.

Totul se calculează în browserul tău, fără să trimită nimic către un server.

Cum se face calculul

Raportul de aspect este lățimea împărțită la înălțime, scrisă sub forma a două numere întregi. Pentru a-l simplifica, instrumentul împarte ambele laturi la cel mai mare divizor comun (c.m.m.d.c.): c.m.m.d.c. al numerelor 1920 și 1080 este 120, deci 1920:1080 = 16:9. Valorile zecimale sunt mai întâi înmulțite cu o putere a lui zece (2,39:1 devine 239:100).

Redimensionarea cu păstrarea proporțiilor este o regulă de trei simplă:

• înălțimea nouă = lățimea nouă × înălțimea inițială ÷ lățimea inițială
• lățimea nouă = înălțimea nouă × lățimea inițială ÷ înălțimea inițială

Exemplu: un videoclip 16:9 cu lățimea de 1280 px are înălțimea 1280 × 9 ÷ 16 = 720 px.

Unele ecrane au rapoarte „ciudate”. Un laptop de 1366 × 768 se simplifică la 683:384, adică 1,779:1, foarte aproape de 16:9 (1,778:1), de aceea apare „≈ 16:9”. Monitoarele vândute ca 21:9 sunt de fapt 64:27 (2560 × 1080) sau 43:18 (3440 × 1440), motiv pentru care ambele apar în tabel.

Proprietatea CSS aspect-ratio

aspect-ratio: 16 / 9; îi spune browserului să calculeze dimensiunea lipsă: cu width: 100%, înălțimea rezultă automat, iar elementul se scalează odată cu containerul. Funcționează în toate browserele actuale (din 2021) și este ideală pentru videoclipuri încorporate, carduri, substituenți de imagini și miniaturi. Combină-o cu object-fit: cover pe imagini ca să le decupezi în loc să le deformezi.

Codul include și vechea tehnică padding-top ca soluție de rezervă: un padding exprimat în procente se calculează după lățime, deci padding-top: 56.25% (9 ÷ 16) rezervă o zonă 16:9, iar conținutul se poziționează absolut în interiorul ei. O folosești doar pentru browsere foarte vechi.

Rezervarea spațiului printr-un raport previne și salturile de aspect (layout shift) cât timp se încarcă imaginile și videoclipurile, ceea ce îmbunătățește scorul Cumulative Layout Shift (CLS).