Beeldverhouding berekenen

Zo bereken je een beeldverhouding

1. Kies een van de Gangbare verhoudingen (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5), of typ zelf waarden in bij Verhouding of oorspronkelijk formaat. Je kunt een verhouding invoeren (16 en 9) of de echte afmetingen van een afbeelding, video of scherm (1920 en 1080).
2. Lees de resultaten af: de Vereenvoudigde verhouding, de Decimale verhouding (breedte gedeeld door hoogte), de Oriëntatie en het formaat bij de Dichtstbijzijnde standaard. Een “≈”-teken betekent dat je formaat dicht bij die standaard ligt, maar er niet precies op valt.
3. Typ onder Nieuw formaat (behoudt de verhouding) een Nieuwe breedte om de bijbehorende hoogte te krijgen, of een Nieuwe hoogte voor de breedte. De regel eronder toont de berekening. Zet Afronden op hele pixels uit als je de exacte waarde nodig hebt, bijvoorbeeld voor drukformaten in millimeters.
4. Breedte en hoogte omwisselen maakt van een liggende verhouding een staande (16:9 wordt 9:16) en omgekeerd.
5. Het Voorbeeld tekent een kader met jouw verhouding, en de tabel geeft het formaat van elke gangbare verhouding bij je nieuwe breedte.
6. Kopieer de CSS-code met Kopiëren.

Hoe de berekening werkt

Een beeldverhouding is de breedte gedeeld door de hoogte, geschreven als twee gehele getallen. Om haar te vereenvoudigen deelt de tool beide kanten door hun grootste gemene deler (ggd): de ggd van 1920 en 1080 is 120, dus 1920:1080 = 16:9. Decimale invoer wordt eerst vermenigvuldigd met een macht van tien (2,39:1 wordt 239:100).

Het formaat aanpassen met behoud van verhouding is een eenvoudige verhoudingstabel (de regel van drie):

• nieuwe hoogte = nieuwe breedte × oorspronkelijke hoogte ÷ oorspronkelijke breedte
• nieuwe breedte = nieuwe hoogte × oorspronkelijke breedte ÷ oorspronkelijke hoogte

Voorbeeld: een 16:9-video van 1280 px breed is 1280 × 9 ÷ 16 = 720 px hoog.

Sommige schermen hebben een “vreemde” verhouding. Een laptop van 1366 × 768 vereenvoudigt tot 683:384, oftewel 1,779:1, een haar verwijderd van 16:9 (1,778:1), vandaar “≈ 16:9”. Monitoren die als 21:9 worden verkocht, zijn in werkelijkheid 64:27 (2560 × 1080) of 43:18 (3440 × 1440). Daarom staan ze allebei in de tabel.

De CSS-eigenschap aspect-ratio

aspect-ratio: 16 / 9; laat de browser de ontbrekende afmeting berekenen: met width: 100% volgt de hoogte automatisch en schaalt het kader mee met zijn container. Het werkt in elke actuele browser (sinds 2021) en is ideaal voor ingesloten video’s, kaarten, plaatsaanduidingen voor afbeeldingen en thumbnails. Combineer het met object-fit: cover op afbeeldingen om bij te snijden in plaats van uit te rekken.

De code bevat ook de oudere padding-top-techniek als terugvaloptie: een procentuele padding wordt berekend vanaf de breedte, dus padding-top: 56.25% (9 ÷ 16) reserveert een 16:9-vlak, waarin de inhoud absoluut wordt gepositioneerd. Die heb je alleen nodig voor heel oude browsers.

Door de ruimte vooraf te reserveren met een verhouding voorkom je ook dat de lay-out verschuift terwijl afbeeldingen en video’s laden. Dat verbetert je Cumulative Layout Shift-score (CLS).