Myndhlutfallsreiknivél

Hvernig á að nota myndhlutfallsreiknivélina

1. Veldu eitt af Algeng hlutföll (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) eða sláðu inn þín eigin gildi í Hlutfall eða upprunaleg stærð. Þú getur slegið inn hlutfall (16 og 9) eða raunverulegar stærðir myndar, myndbands eða skjás (1920 og 1080).
2. Lestu niðurstöðurnar: Stytt hlutfall, Hlutfall sem tugabrot (breidd deilt með hæð), Stefna og Næsta staðlaða snið. Merkið „≈“ þýðir að stærðin þín er nálægt staðlinum en ekki nákvæmlega eins.
3. Undir Ný stærð (heldur hlutfallinu) sláðu inn Ný breidd til að fá samsvarandi hæð, eða Ný hæð til að fá breiddina. Línan fyrir neðan sýnir útreikninginn. Taktu hakið úr Námunda að heilum pixlum ef þú þarft nákvæmt gildi, til dæmis fyrir prentstærðir í millimetrum.
4. Víxla breidd og hæð breytir láréttu hlutfalli í lóðrétt (16:9 verður 9:16) og öfugt.
5. Forskoðun teiknar kassa með hlutfallinu þínu og taflan sýnir stærð allra algengra hlutfalla við nýju breiddina.
6. Afritaðu CSS-kóði með Afrita.

Hvernig útreikningurinn virkar

Myndhlutfall er breidd deilt með hæð, skrifað sem tvær heiltölur. Til að stytta það deilir tólið báðum hliðum með stærsta sameiginlega þættinum (GCD): stærsti sameiginlegi þáttur 1920 og 1080 er 120, svo 1920:1080 = 16:9. Tugabrot eru fyrst margfölduð með veldi af tíu (2,39:1 verður 239:100).

Til að breyta stærð og halda hlutföllunum er notuð þrístæða:

• ný hæð = ný breidd × upprunaleg hæð ÷ upprunaleg breidd
• ný breidd = ný hæð × upprunaleg breidd ÷ upprunaleg hæð

Dæmi: 16:9 myndband sem er 1280 px á breidd er 1280 × 9 ÷ 16 = 720 px á hæð.

Sumir skjáir hafa „skrítin“ hlutföll. Fartölva með 1366 × 768 styttist í 683:384, sem er 1,779:1 og aðeins hársbreidd frá 16:9 (1,778:1), þess vegna birtist „≈ 16:9“. Skjáir sem seldir eru sem 21:9 eru í raun 64:27 (2560 × 1080) eða 43:18 (3440 × 1440), og þess vegna eru báðir í töflunni.

CSS-eiginleikinn aspect-ratio

aspect-ratio: 16 / 9; segir vafranum að reikna vantandi vídd: með width: 100% fylgir hæðin sjálfkrafa og kassinn skalast með ílátinu. Eiginleikinn virkar í öllum núverandi vöfrum (frá 2021) og hentar vel fyrir innfelld myndbönd, spjöld, myndaplássvara og smámyndir. Notaðu hann með object-fit: cover á myndum til að skera frekar en teygja.

Kóðinn inniheldur einnig eldri padding-top aðferðina sem varaleið: prósentufylling er reiknuð út frá breiddinni, þannig að padding-top: 56.25% (9 ÷ 16) tekur frá 16:9 svæði og innihaldið er staðsett með absolute inni í því. Þú þarft hana aðeins fyrir mjög gamla vafra.

Með því að taka frá pláss með hlutfalli kemurðu líka í veg fyrir tilfærslur á útliti meðan myndir og myndbönd hlaðast, sem bætir Cumulative Layout Shift (CLS) einkunnina.