Formatforholdsberegner

Sådan bruger du formatforholdsberegneren

1. Vælg et af de Almindelige formater (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5), eller skriv dine egne tal i Format eller originalstørrelse. Du kan indtaste et format (16 og 9) eller de faktiske mål på et billede, en video eller en skærm (1920 og 1080).
2. Aflæs resultatet: det Forkortede format, det Decimale format (bredde divideret med højde), Orientering og Nærmeste standard. Tegnet »≈« betyder, at din størrelse ligger tæt på standarden, men ikke præcis svarer til den.
3. Under Ny størrelse (bevarer formatet) skriver du en Ny bredde for at få den tilsvarende højde eller en Ny højde for at få bredden. Linjen nedenunder viser udregningen. Fjern markeringen i Afrund til hele pixel, hvis du har brug for den præcise værdi, for eksempel til printmål i millimeter.
4. Byt om på bredde og højde gør et liggende format stående (16:9 bliver til 9:16) og omvendt.
5. Eksempel tegner en boks med dit format, og tabellen viser størrelsen for hvert almindeligt format ved din nye bredde.
6. Kopiér CSS-kode med knappen Kopiér.

Alt foregår i din browser. Intet, du indtaster, sendes til en server.

Sådan fungerer udregningen

Et formatforhold er bredden divideret med højden, skrevet som to hele tal. For at forkorte det dividerer værktøjet begge sider med deres største fælles divisor: den største fælles divisor af 1920 og 1080 er 120, så 1920:1080 = 16:9. Decimaltal bliver først ganget op med en tierpotens (2,39:1 bliver til 239:100).

Når du skalerer med samme proportioner, er det en simpel regel om forhold:

• ny højde = ny bredde × oprindelig højde ÷ oprindelig bredde
• ny bredde = ny højde × oprindelig bredde ÷ oprindelig højde

Eksempel: en 16:9-video, der er 1280 px bred, er 1280 × 9 ÷ 16 = 720 px høj.

Nogle skærme har »skæve« formater. En bærbar med 1366 × 768 forkortes til 683:384, altså 1,779:1, en anelse fra 16:9 (1,778:1), og derfor vises »≈ 16:9«. Skærme, der sælges som 21:9, er i virkeligheden 64:27 (2560 × 1080) eller 43:18 (3440 × 1440), og derfor står begge med i tabellen.

CSS-egenskaben aspect-ratio

aspect-ratio: 16 / 9; får browseren til at beregne den manglende dimension: med width: 100% følger højden automatisk, og boksen skalerer med sin beholder. Egenskaben virker i alle nutidige browsere (siden 2021) og er oplagt til indlejrede videoer, kort, pladsholdere til billeder og miniaturer. Kombinér den med object-fit: cover på billeder, så de beskæres i stedet for at blive strukket.

Koden indeholder også den ældre padding-top-teknik som reserveløsning: en procentvis padding beregnes ud fra bredden, så padding-top: 56.25% (9 ÷ 16) afsætter et 16:9-område, og indholdet placeres absolut indeni. Du har kun brug for den til meget gamle browsere.

Når du reserverer pladsen med et formatforhold, undgår du også, at layoutet hopper, mens billeder og videoer indlæses. Det forbedrer din score for Cumulative Layout Shift (CLS).