# Sideforhold forklart: 1:1, 4:5, 9:16, 16:9 og flere

[Canonical HTML page](https://gradiently.design/nb/guide/aspect-ratios-explained)

Pikselstørrelser endrer seg fra plattform til plattform, men det finnes bare en håndfull former. Lær dem, og matematikken som binder dem sammen, så kommer du aldri til å klemme et design igjen.

## The short version

- Et sideforhold er det proporsjonale forholdet mellom et bildes bredde og høyde, skrevet som bredde:høyde.
- For å finne sideforholdet til en størrelse deler du begge tallene på deres største felles divisor, så 1920×1080 blir 16:9.
- For å få en ny størrelse med samme sideforhold ganger du den nye bredden med forholdets høyde og deler på forholdets bredde.
- Sideforholdene som betyr mest i sosiale medier er 1:1, 4:5, 9:16, 16:9 og 1,91:1.
- Å endre et bilde til et annet sideforhold betyr alltid å beskjære, legge til luft eller sette opp designet på nytt; å strekke det forvrenger det.

Et **sideforhold** er formen på et bilde: bredden sammenlignet med høyden, skrevet som to tall, for eksempel 16:9. En video i 1920×1080 og et miniatyrbilde i 1280×720 har ulik størrelse, men samme sideforhold 16:9, så det ene skaleres til det andre uten beskjæring. De fleste designproblemer med «feil størrelse» er egentlig problemer med feil form.

## De vanlige sideforholdene og hvor de brukes

- 1:1 kvadrat: 1080 × 1080
- 4:5 stående: 1080 × 1350
- 2:3 pin: 1000 × 1500
- 9:16 vertikal: 1080 × 1920
- 4:3 klassisk: 1600 × 1200
- 16:9 bredformat: 1920 × 1080
- 1,91:1 lenkekort: 1200 × 630
- 3:1 toppbanner: 1500 × 500

Åtte former dekker nesten alt du kommer til å designe. Tegnet i riktig målestokk, fra kvadratet til det smale toppbanneret.

| Forhold | Form | Typisk størrelse | Brukes til |
| --- | --- | --- | --- |
| 1:1 | Kvadrat | 1080×1080 | Kvadratiske Instagram-innlegg, innlegg på Facebook og LinkedIn, spillelisteomslag |
| 4:5 | Stående | 1080×1350 | Stående innlegg på Instagram, Threads, Facebook og X |
| 3:4 | Stående | 1080×1440 | Slik Instagram beskjærer innlegg i profilrutenettet |
| 2:3 | Høyt stående | 1000×1500 | Pinterest-pins |
| 9:16 | Vertikal | 1080×1920 | Stories, Reels, TikTok, Shorts, WhatsApp-status |
| 4:3 | Klassisk liggende | 1600×1200 | Eldre presentasjoner, Dribbble-bilder, Google Business-innlegg i 1200×900 |
| 16:9 | Bredformat | 1920×1080 | YouTube-miniatyrbilder, presentasjoner, toppbilder på nettsider, innlegg på X og Bluesky |
| 1,91:1 | Bredt kort | 1200×630 | Lenkeforhåndsvisninger og Open Graph-bilder |
| 3:1 og 4:1 | Banner | 1500×500, 1584×396 | Toppbilder på X, LinkedIn-bannere |

Ett forhold, mange plattformer. Når to formater har samme forhold, dekker ett design begge ved skalering.

De nøyaktige pikselstørrelsene for hver plattform finner du i [bildestørrelser for sosiale medier](https://gradiently.design/nb/guide/social-media-image-sizes). Legg merke til hvor få former det er: kan du designe godt i 1:1, 4:5, 9:16 og 16:9, dekker du det meste av en merkevares tilstedeværelse i sosiale medier.

## Slik regner du ut et sideforhold

Ta bredden og høyden og del begge på det største tallet som går opp i begge, kalt største felles divisor. Det som står igjen er forholdet i enkleste form.

1. **Start med størrelsen** For eksempel 1080×1350, et stående Instagram-innlegg.
2. **Finn største felles divisor** Det største tallet som går opp i både 1080 og 1350 er 270.
3. **Del begge sidene** 1080 ÷ 270 = 4 og 1350 ÷ 270 = 5. Sideforholdet er 4:5.
4. **Eller bruk et desimaltall** Del bredden på høyden: 1080 ÷ 1350 = 0,8. Desimaltall er praktiske for kronglete former som 1200×630, som er omtrent 1,91, derav 1,91:1.

Vil du slippe å regne for hånd, gjør disse få linjene med JavaScript det samme i nettleserkonsollen.

```js
const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));

function aspectRatio(width, height) {
  const d = gcd(width, height);
  return `${width / d}:${height / d}`;
}

// Height for a new width, keeping the same shape
const heightFor = (newWidth, w, h) => Math.round((newWidth * h) / w);

aspectRatio(1920, 1080); // "16:9"
aspectRatio(1080, 1350); // "4:5"
heightFor(1280, 16, 9);  // 720
```

Euklids algoritme for divisoren, deretter enkel skalering. Lim det inn i hvilken som helst nettleserkonsoll.

## Konvertere størrelser uten å endre formen

For å skalere et bilde og beholde sideforholdet bruker du én formel: **ny høyde = ny bredde × forholdets høyde ÷ forholdets bredde**. For en 16:9-ramme som er 1280 piksler bred blir det 1280 × 9 ÷ 16 = 720. For en 4:5-ramme som er 1600 piksler bred blir det 1600 × 5 ÷ 4 = 2000.

Andre veien er like enkelt: ny bredde = ny høyde × forholdets bredde ÷ forholdets høyde. En 9:16-video som må være 1280 høy blir 1280 × 9 ÷ 16 = 720 bred. Får du et desimaltall, runder du av til nærmeste hele piksel; forskjellen er usynlig.

## Hva skjer når du endrer sideforholdet

Skalering beholder formen. Å endre forholdet gjør ikke det, og du har bare tre ærlige valg: beskjære bort en del av bildet, legge til luft rundt det, eller sette opp designet på nytt for den nye formen. Det fjerde valget, å strekke, forvrenger hver bokstav og hver sirkel, og folk merker det med en gang.

### Beskjære eller strekke

- Raskt, men overskriften blir ofte kuttet
- Strekking får skriften til å se sammenklemt ut
- Logoer havner på feil sted
- Bakgrunner mister det lyse punktet sitt
- Hvert format ser litt feil ut

### Sette opp på nytt

- Ordene flyter om for å passe formen
- Skriften beholder sine ekte proporsjoner
- Logoen havner der hvert format forventer den
- Bakgrunnen gjengis på nytt for rammen
- Hvert format ser designet ut for sin plass

Et stående innlegg i 4:5 for et keramikkverksted som kunngjør at vårkursene er åpne

Designet i 4:5 for feeden: stablede ord, luft over og under.

Den samme kunngjøringen fra keramikkverkstedet satt opp i en bred 16:9-ramme

Samme design i 16:9 som toppbilde på en nettside: ordene sprer seg bredere, bakgrunnen tegnes på nytt for rammen.

Det er dette endring av størrelse i Gradiently gjør med Pro: velg størrelsene du trenger, så settes hver kopi opp på nytt for sin form, mens Marken bak gjengis på nytt i hvert forhold i stedet for å beskjæres fra ett bilde. [Ett uttrykk, alle størrelser](https://gradiently.design/nb/guide/one-look-every-size) går gjennom det.

## Hvilket sideforhold du bør velge til et innlegg

Når en plattform godtar flere former, velger du den som tar mest plass på en mobilskjerm. På Instagram er det 4:5, som er høyere enn et kvadrat og tåler beskjæringen i profilrutenettet best; [størrelse på Instagram-innlegg](https://gradiently.design/nb/guide/instagram-post-size) forklarer hvorfor. På Pinterest er en pin i 2:3 standarden; lengre pins finnes, men kan bli kuttet i feeden, som omtalt i [størrelse på Pinterest-pins](https://gradiently.design/nb/guide/pinterest-pin-size).

For alt som ses på TV eller bærbar PC er 16:9 det trygge valget, og derfor bruker [YouTube-miniatyrbilder](https://gradiently.design/nb/guide/youtube-thumbnail-size) og presentasjoner det. For alt som ses i fullskjerm på en mobil, er 9:16 den eneste formen som fyller skjermen. Er du i tvil, designer du den vertikale og den brede versjonen først: kvadratet og det stående formatet passer fint mellom dem.

## Sideforhold i CSS

På nett holder CSS-egenskapen `aspect-ratio` en boks i form uansett bredde, noe som hindrer at layouten hopper mens bilder og videoer lastes. Den støttes i alle dagens nettlesere; se [MDNs referanse for aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).

```css
.hero {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%);
}

.card-image {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover; /* crops to fill rather than stretching */
}
```

Skriv forholdet med skråstrek. Kombiner det med object-fit: cover på bilder, så beskjæres de i stedet for å forvrenges.

Sideforhold betyr også noe for trykk og video, med egne konvensjoner. For videoformater, se [videostørrelser for sosiale medier](https://gradiently.design/nb/guide/social-video-sizes), og for hvordan antall piksler henger sammen med fysisk størrelse, [DPI og PPI](https://gradiently.design/nb/guide/dpi-vs-ppi).

## FAQ

### Hva er et sideforhold?

Det er formen på et bilde, uttrykt som bredden sammenlignet med høyden, for eksempel 16:9 eller 4:5. Bilder med samme sideforhold skaleres til hverandre uten beskjæring.

### Hvordan regner jeg ut et sideforhold?

Del bredden og høyden på deres største felles divisor. For 1920×1080 er divisoren 120, som gir 16:9.

### Hvilket sideforhold er 1080×1350?

4:5, den stående formen som brukes til stående innlegg på Instagram, Threads, Facebook og X.

### Hva er forskjellen på 16:9 og 9:16?

Det er samme form snudd på siden. 16:9 er liggende og brukes til YouTube og presentasjoner; 9:16 er vertikal og brukes til Stories, Reels og TikTok.

### Hvordan endrer jeg sideforhold uten å strekke?

Beskjær bildet, legg til luft rundt det, eller sett opp designet på nytt for den nye formen. Å sette opp på nytt gir best resultat for design med tekst.