Sideforholdskalkulator

Slik bruker du sideforholdskalkulatoren

1. Velg et av de Vanlige sideforholdene (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5), eller skriv inn egne verdier under Sideforhold eller opprinnelig størrelse. Du kan skrive inn et sideforhold (16 og 9) eller de faktiske målene på et bilde, en video eller en skjerm (1920 og 1080).
2. Les av resultatet: Forkortet sideforhold, Sideforhold som desimaltall (bredde delt på høyde), Retning og Nærmeste standard. Tegnet «≈» betyr at størrelsen din ligger nær standarden, men ikke er helt lik den.
3. Under Ny størrelse (beholder sideforholdet) skriver du inn en Ny bredde for å få høyden, eller en Ny høyde for å få bredden. Linjen under viser regnestykket. Fjern haken ved Rund av til hele piksler hvis du trenger den nøyaktige verdien, for eksempel til utskriftsmål i millimeter.
4. Bytt om bredde og høyde gjør et liggende format om til stående (16:9 blir 9:16) og motsatt.
5. Forhåndsvisning tegner en boks med sideforholdet ditt, og tabellen viser størrelsen på hvert vanlig sideforhold ved den nye bredden din.
6. Kopier CSS-kode med Kopier.

Alt skjer i nettleseren din. Ingenting du skriver inn, sendes til en server.

Slik fungerer utregningen

Et sideforhold er bredden delt på høyden, skrevet som to hele tall. For å forkorte det deler verktøyet begge sidene på den største felles divisoren: den største felles divisoren til 1920 og 1080 er 120, så 1920:1080 = 16:9. Desimaltall ganges først opp med en tierpotens (2,39:1 blir 239:100).

Når du endrer størrelse og vil beholde proporsjonene, er det en enkel regel om forhold:

• ny høyde = ny bredde × opprinnelig høyde ÷ opprinnelig bredde
• ny bredde = ny høyde × opprinnelig bredde ÷ opprinnelig høyde

Eksempel: en 16:9-video som er 1280 px bred, blir 1280 × 9 ÷ 16 = 720 px høy.

Noen skjermer har «rare» sideforhold. En bærbar PC på 1366 × 768 forkortes til 683:384, som er 1,779:1 – like ved 16:9 (1,778:1), og derfor vises «≈ 16:9». Skjermer som selges som 21:9, er egentlig 64:27 (2560 × 1080) eller 43:18 (3440 × 1440), og det er derfor begge står i tabellen.

CSS-egenskapen aspect-ratio

aspect-ratio: 16 / 9; ber nettleseren regne ut den manglende dimensjonen: med width: 100% følger høyden automatisk, og boksen skalerer med beholderen sin. Egenskapen fungerer i alle moderne nettlesere (siden 2021) og passer godt til innebygde videoer, kort, plassholdere for bilder og miniatyrbilder. Kombiner den med object-fit: cover på bilder for å beskjære i stedet for å strekke.

Koden inneholder også den eldre padding-top-teknikken som reserveløsning: en padding i prosent regnes ut fra bredden, så padding-top: 56.25% (9 ÷ 16) reserverer et 16:9-område, og innholdet plasseres absolutt inni det. Du trenger den bare for svært gamle nettlesere.

Når du reserverer plassen med et sideforhold, unngår du også hopp i layouten mens bilder og videoer lastes, noe som forbedrer målingen Cumulative Layout Shift (CLS).