Aspect Ratio Calculator

Paano gamitin ang aspect ratio calculator

1. Pumili ng isa sa Mga karaniwang ratio (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5), o ilagay ang sarili mong halaga sa Ratio o orihinal na laki. Puwede kang maglagay ng ratio (16 at 9) o ng totoong sukat ng larawan, video o screen (1920 at 1080).
2. Basahin ang resulta: ang Pinasimpleng ratio, ang Decimal na ratio (lapad na hinati sa taas), ang Orientation at ang Pinakamalapit na standard na format. Ang simbolong “≈” ay nangangahulugang malapit, pero hindi eksakto, ang laki mo sa standard na iyon.
3. Sa ilalim ng Bagong laki (pinapanatili ang ratio), mag-type ng Bagong lapad para makuha ang katumbas na taas, o ng Bagong taas para makuha ang lapad. Ipinapakita ng linya sa ibaba ang kuwenta. Alisin ang tsek sa I-round sa buong pixel kung kailangan mo ang eksaktong halaga, halimbawa para sa mga laki ng print sa millimeter.
4. Ginagawang portrait ng Ipagpalit ang lapad at taas ang landscape na ratio (ang 16:9 ay nagiging 9:16) at kabaligtaran.
5. Gumuguhit ang Preview ng kahon na may ratio mo, at inililista ng talahanayan ang laki ng bawat karaniwang ratio sa bago mong lapad.
6. Kopyahin ang CSS code gamit ang Kopyahin.

Gumagana ito sa iyong browser. Walang ini-type mo na ipinapadala sa server.

Paano gumagana ang kuwenta

Ang aspect ratio ay ang lapad na hinati sa taas, na isinusulat bilang dalawang buong numero. Para pasimplehin ito, hinahati ng tool ang magkabilang panig sa kanilang greatest common divisor (GCD): ang GCD ng 1920 at 1080 ay 120, kaya ang 1920:1080 ay 16:9. Ang mga input na may decimal ay minumultiply muna sa power ng sampu (ang 2.39:1 ay nagiging 239:100).

Para mag-resize nang hindi nasisira ang proporsyon, rule of three ang ginagamit:

• bagong taas = bagong lapad × orihinal na taas ÷ orihinal na lapad
• bagong lapad = bagong taas × orihinal na lapad ÷ orihinal na taas

Halimbawa: ang 16:9 na video na 1280 px ang lapad ay may taas na 1280 × 9 ÷ 16 = 720 px.

May mga screen na kakaiba ang ratio. Ang laptop na 1366 × 768 ay nagiging 683:384 kapag pinasimple, o 1.779:1, halos kapareho ng 16:9 (1.778:1), kaya lumalabas ang “≈ 16:9”. Ang mga monitor na ibinebenta bilang 21:9 ay talagang 64:27 (2560 × 1080) o 43:18 (3440 × 1440), kaya parehong nasa talahanayan ang dalawa.

Ang CSS na property na aspect-ratio

Sinasabi ng aspect-ratio: 16 / 9; sa browser na kalkulahin ang kulang na sukat: kapag may width: 100%, kusang susunod ang taas, at lumiliit o lumalaki ang kahon kasabay ng container nito. Gumagana ito sa lahat ng kasalukuyang browser (mula 2021) at bagay na bagay sa mga video embed, card, placeholder ng larawan at thumbnail. Isama ito sa object-fit: cover sa mga larawan para i-crop sa halip na iunat.

Kasama rin sa code ang mas lumang padding-top technique bilang fallback: ang percentage na padding ay kinukuwenta mula sa lapad, kaya ang padding-top: 56.25% (9 ÷ 16) ay nagtatabi ng espasyong 16:9, at inilalagay ang nilalaman nang absolute sa loob nito. Kailangan mo lang ito para sa napakaluma nang mga browser.

Ang pagtatabi ng espasyo gamit ang ratio ay pumipigil din sa layout shift habang naglo-load ang mga larawan at video, kaya gumaganda ang iyong Cumulative Layout Shift (CLS) score.