Sideforhold-kalkulator

Hva er en sideforholdskalkulator?

En sideforholdskalkulator hjelper deg å beregne dimensjoner som bevarer et bestemt bredde-til-høyde-forhold. Når du kjenner bredden og sideforholdet (f.eks. 16:9), beregner verktøyet automatisk den korrekte høyden. Omvendt, hvis du har begge dimensjoner, identifiserer den sideforholdet og forenkler det til sin laveste form.

Sideforhold er fundamentalt i visuelt design — videoer, bilder, skjermer og trykkformater har alle standardiserte forhold. 16:9 er standard for HD-video og de fleste skjermer. 4:3 var standard for eldre TV-er. 1:1 er kvadratisk (Instagram). 9:16 er vertikal video (TikTok, Stories). Feil sideforhold fører til forvrengning eller svarte kanter.

Slik bruker du dette verktøyet

Skriv inn to av tre verdier: bredde, høyde eller sideforhold. Verktøyet beregner den manglende verdien. For eksempel: bredde 1920 med 16:9 gir høyde 1080. Eller skriv inn 1920x1080 og verktøyet identifiserer 16:9. Resultatene viser også alternative oppløsninger med samme sideforhold.

Vanlige sideforhold

• 16:9 — HD widescreen. YouTube, TV, de fleste dataskjermer. Oppløsninger: 1920x1080, 2560x1440, 3840x2160.
• 4:3 — klassisk TV og dataskjerm. iPad-skjerm. PowerPoint-presentasjoner.
• 1:1 — kvadrat. Instagram-poster, profilbilder, album-covere.
• 9:16 — vertikal. TikTok, Instagram/Facebook Stories, Reels, Shorts.
• 21:9 — ultrawide. Kinofilm, ultrawide monitorer.

Størrelsesforhold i webdesign

I CSS opprettholder aspect-ratio-egenskapen proporsjoner for responsive elementer. Før denne egenskapen eksisterte, brukte utviklere padding-bottom-trikset (padding-bottom: 56.25% for 16:9). Moderne CSS gjør det enkelt: sett aspect-ratio: 16 / 9 på ethvert element. Dette er avgjørende for innbygging av videoer, opprettelse av bildegallerier og design av kortoppsett som ser konsistente ut på tvers av enheter.

Ofte stilte spørsmål

Hva skjer hvis jeg bruker feil sideforhold?

Innhold med feil sideforhold vises enten med svarte kanter (letterboxing/pillarboxing), strekkes fordreid eller beskjæres. YouTube legger til svarte kanter rundt videoer som ikke er 16:9. Instagram beskjærer automatisk bilder som ikke er 1:1 eller 4:5. For best resultat bør du produsere innhold i det sideforholdet plattformen foretrekker.

Hvordan påvirker sideforhold responsivt webdesign?

CSS aspect-ratio-egenskapen lar deg angi et fast sideforhold for elementer. Bilder med aspect-ratio og width: 100% skaleres proporsjonalt uten layout shift. For video-innbygginger er padding-hack-teknikken (padding-top: 56.25% for 16:9) eller den nyere aspect-ratio-egenskapen standardløsninger. Å reservere plass med riktig sideforhold forhindrer innholdsskift (CLS).