Malu attiecības kalkulators

Kā lietot malu attiecības kalkulatoru

1. Izvēlieties vienu no Biežākās attiecības (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) vai ievadiet savas vērtības laukā Attiecība vai sākotnējais izmērs. Varat ievadīt attiecību (16 un 9) vai attēla, video vai ekrāna īstos izmērus (1920 un 1080).
2. Izlasiet rezultātus: Vienkāršotā attiecība, Decimālā attiecība (platums, dalīts ar augstumu), Orientācija un Tuvākais standarts. Zīme „≈“ nozīmē, ka jūsu izmērs ir tuvu šim standartam, bet ne tieši tāds.
3. Sadaļā Jaunais izmērs (saglabā attiecību) ievadiet Jaunais platums, lai iegūtu atbilstošo augstumu, vai Jaunais augstums, lai iegūtu platumu. Rindiņa zemāk parāda aprēķinu. Noņemiet atzīmi pie Noapaļot līdz veseliem pikseļiem, ja nepieciešama precīza vērtība, piemēram, drukas izmēriem milimetros.
4. Apmainīt platumu un augstumu pārvērš ainavas attiecību portretā (16:9 kļūst par 9:16) un otrādi.
5. Priekšskatījums uzzīmē lodziņu ar jūsu attiecību, bet tabulā redzams visu biežāko attiecību izmērs pie jūsu jaunā platuma.
6. Ar Kopēt nokopējiet CSS kods.

Kā darbojas aprēķins

Malu attiecība ir platums, dalīts ar augstumu, un to raksta kā diviem veseliem skaitļiem. Lai to vienkāršotu, rīks abas puses dala ar lielāko kopīgo dalītāju (LKD): skaitļu 1920 un 1080 LKD ir 120, tātad 1920:1080 = 16:9. Decimāldaļskaitļus vispirms reizina ar desmit pakāpi (2,39:1 kļūst par 239:100).

Izmēra maiņa, saglabājot proporcijas, ir proporcijas likums:

• jaunais augstums = jaunais platums × sākotnējais augstums ÷ sākotnējais platums
• jaunais platums = jaunais augstums × sākotnējais platums ÷ sākotnējais augstums

Piemērs: 16:9 video ar platumu 1280 px ir 1280 × 9 ÷ 16 = 720 px augsts.

Dažiem ekrāniem ir „neparastas“ attiecības. Klēpjdators ar 1366 × 768 vienkāršojas līdz 683:384, tas ir 1,779:1, par mata tiesu no 16:9 (1,778:1), tāpēc rezultāts ir „≈ 16:9“. Monitori, ko pārdod kā 21:9, patiesībā ir 64:27 (2560 × 1080) vai 43:18 (3440 × 1440), tāpēc tabulā ir abi.

CSS īpašība aspect-ratio

aspect-ratio: 16 / 9; liek pārlūkprogrammai aprēķināt trūkstošo izmēru: ar width: 100% augstums tiek noteikts automātiski, un lodziņš mērogojas līdzi konteineram. Tā darbojas visās mūsdienu pārlūkprogrammās (kopš 2021. gada) un ir ideāla video iegulšanai, kartītēm, attēlu vietturiem un sīktēliem. Kopā ar object-fit: cover attēliem to var izmantot, lai apgrieztu, nevis izstieptu.

Kods ietver arī vecāko padding-top paņēmienu kā rezerves variantu: procentuālais iekšējais atstatums tiek rēķināts no platuma, tāpēc padding-top: 56.25% (9 ÷ 16) rezervē 16:9 laukumu, bet saturs tajā tiek novietots absolūti. Tas vajadzīgs tikai ļoti vecām pārlūkprogrammām.

Rezervējot vietu ar attiecību, tiek novērsta izkārtojuma nobīde, kamēr ielādējas attēli un video, un tas uzlabo rādītāju Cumulative Layout Shift (CLS).