Beeldverhouding Calculator (Aspect Ratio)

Aspect ratio calculator (beeldverhouding) voor afbeelding en video — bereken breedte of hoogte met behoud van de verhouding, bepaal de verhouding van elke afbeelding, krijg kant-en-klare CSS-code en controleer letterbox-balken. Gratis, zonder registratie.

:

Veelgebruikt

Sociale media

Druk en papier

Cinema en video

1920 × 1080
Verhouding van de afmetingen: 16:9

Breedte (px)

1920

Hoogte (px)

1080

Megapixels

2.07

Kant-en-klare code

CSS aspect-ratio:
aspect-ratio: 16 / 9;
HTML <img> (anti-CLS):
<img src="..." width="1920" height="1080" alt="">
Responsieve iframe-CSS:
.embed { position: relative; width: 100%; padding-bottom: 56.25%; } .embed > iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

PNG-gids downloaden

Genereert een PNG-afbeelding in de exact gekozen verhouding, schoon en zonder markeringen. Handig als kadersjabloon of ontwerpbasis. De langste zijde is 2048px.

Over deze tool

Gratis online aspect ratio calculator (beeldverhouding) voor iedereen die werkt met video, design en webontwikkeling. De tool berekent de verhouding tussen een ratio (16:9, 4:3, 1:1, 21:9 en tientallen anderen) en de velden breedte en hoogte: voer één afmeting in en de andere wordt direct berekend met behoud van de beeldverhouding. Je kunt ook de verhouding van elke bestaande resolutie bepalen — voer breedte en hoogte in en de tool reduceert automatisch naar de minimale vorm. Daarnaast levert het kant-en-klare CSS-code, een realtime voorbeeld en een letterbox-berekening voor het inpassen van inhoud in een container met een andere verhouding. Alles werkt in de browser, zonder registratie.

Functies

Berekent breedte of hoogte met behoud van de verhouding
Tientallen presets per context: sociale media, cinema en druk
Genereert CSS aspect-ratio-code, anti-CLS afbeeldingsattributen en responsieve iframe
Letterbox- en pillarbox-berekening voor inpassen in containers
PNG-gids downloaden in exacte verhouding plus realtime voorbeeld

Hoe de beeldverhoudingberekening werkt

Een aspect ratio (beeldverhouding) is de relatie tussen breedte en hoogte, geschreven als twee getallen gescheiden door een dubbele punt. Bij 16:9 zijn er voor elke 16 eenheden breedte 9 eenheden hoogte. De berekening is een eenvoudige proportie: de hoogte volgt uit breedte × (9 ÷ 16) en de breedte uit hoogte × (16 ÷ 9). Om de verhouding van een afbeelding te bepalen, deel je breedte en hoogte door hun grootste gemene deler — zo wordt 1920×1080 gereduceerd tot de minimale vorm 16:9. Precies dit principe past de calculator toe om elke formaatwijziging vervormingsvrij te houden.

Toepassingen

De meest voorkomende toepassingen van de aspect ratio calculator in de dagelijkse praktijk van mensen die visuele content en code produceren:

  • Videobewerking en -exportEen 4K-master naar HD converteren, uitvoerresoluties instellen en de juiste hoogte van een widescreen-uitsnede vinden zonder het beeld te vervormen.
  • Banners en responsieve lay-outDe hoogte van een banner bepalen op basis van een vaste breedte en de CSS aspect-ratio genereren die de verhoudingen op elk scherm behoudt.
  • Sociale media-contentStory 9:16 (1080×1920px), Instagram-feed 4:5 (1080×1350px) en YouTube-thumbnail 16:9 (1280×720px) correct instellen vóór het exporteren, om ongewenste bijsnijdingen bij publicatie te vermijden.
  • Responsieve ingesloten videoHet iframe-patroon met proportionele padding genereren om videospelers in te sluiten die zich aanpassen aan de containerbreedte.
  • Prestaties en Core Web VitalsDe attributen width en height van afbeeldingen invullen om lay-outruimte te reserveren en cumulatieve lay-outverschuiving (CLS) te verminderen.
  • Druk en opmaakProportionele afmetingen berekenen voor A4, foto's en drukmateriaal op basis van een bekende maat.

Hoe te gebruiken

1

Kies de verhouding

Typ de twee getallen van de verhouding of klik op een van de presets georganiseerd per context. Het voorbeeld en de code worden direct bijgewerkt.

2

Voer één afmeting in

Vul de breedte of de hoogte in. Het tegenoverliggende veld wordt automatisch berekend met behoud van de gekozen verhouding.

3

Kopieer de code

Gebruik de kopieerknopen om de CSS aspect-ratio, de afbeeldingsattributen of de responsieve iframe direct naar je project over te brengen.

4

Controleer de letterbox (optioneel)

Schakel de balkberekening in, voer de containergrootte in en zie hoeveel zwarte balk er overblijft bij het inpassen van de inhoud.

Veelgestelde vragen

Wat betekent aspect ratio (beeldverhouding)?

De aspect ratio (beeldverhouding) is de relatie tussen de breedte en hoogte van een afbeelding, video of scherm. Het wordt geschreven als twee getallen gescheiden door een dubbele punt, zoals 16:9 of 4:3. Het eerste getal staat voor de proportionele breedte en het tweede voor de hoogte. Een verhouding van 16:9 geeft geen werkelijke pixelgrootte aan, alleen dat de breedte altijd 16/9 keer de hoogte is, of het nu gaat om een video van 1280×720 of 3840×2160.

Hoe bereken ik de hoogte vanuit de breedte met behoud van de verhouding?

Vermenigvuldig de breedte met de hoogte van de verhouding en deel door de breedte van de verhouding. Voor een breedte van 1200px bij 16:9 is de berekening 1200 × 9 ÷ 16, wat 675px hoogte geeft. De calculator doet dit automatisch: kies de verhouding, voer de breedte in en de hoogte verschijnt al berekend. De omgekeerde weg — breedte uit hoogte — volgt dezelfde logica met verwisselde termen.

Wat is het verschil tussen 16:9, 4:3 en 21:9?

Het zijn verhoudingen met verschillende formaten. 4:3 is bijna vierkant, de standaard van oude tv's en monitoren. 16:9 is het huidige breedbeeldformaat, gebruikt in vrijwel alle online video, tv en telefoons in liggende stand. 21:9 is ultrabreed, meer langgerekt, gangbaar bij productiviteitsmonitoren en films met een cinematografische sfeer. Hoe groter het verschil tussen de twee getallen, hoe langgerekter en panoramischer het beeld.

Wat zijn letterbox en pillarbox?

Het zijn de zwarte balken die verschijnen wanneer inhoud wordt weergegeven in een ruimte met een andere verhouding, zonder iets bij te snijden. Letterbox zijn de horizontale balken boven en onder, gebruikelijk bij het bekijken van een breedbeeldfilm op een meer vierkant scherm. Pillarbox zijn de verticale balken aan de zijkanten, die verschijnen bij het weergeven van een meer vierkante video op een breedbeeldscherm. De calculator vertelt je precies hoeveel pixels balk er in elk geval overblijven.

Hoe gebruik ik aspect-ratio in CSS?

De CSS-eigenschap aspect-ratio reserveert de ruimte van een element in de gewenste verhouding zonder de hoogte vast te hoeven stellen. Voor een 16:9-blok schrijf je gewoon aspect-ratio: 16 / 9 en de browser berekent de hoogte uit de beschikbare breedte. Dit is de moderne manier om responsieve verhoudingen te bewaren en vervangt de oude padding-bottom-percentagetruc. De calculator genereert deze regel al met de waarden van de gekozen verhouding.

Zie ook