Zo gebruik je deze tool
- Voer de verhouding in (bijvoorbeeld 16 en 9) of kies een gangbare verhouding. Typ daarna een breedte of hoogte om de andere afmeting te laten berekenen.
- Voer de breedte en hoogte van een afbeelding, scherm of video in om de verhouding te bepalen.
- Bekijk het voorbeeld en kopieer de CSS-regel aspect-ratio als u die nodig hebt voor een webpagina.
Hoe het werkt
Bij proportioneel schalen gebruik je hoogte = breedte × verhouding hoogte ÷ verhouding breedte (en andersom). Afmetingen in pixels zijn meestal hele getallen, dus het resultaat kan worden afgerond. Als een verhouding niet precies uitkomt, zoals 16:9 bij een breedte van 1000, is de afgeronde hoogte (563) een benadering en geen exacte overeenkomst.
Een afmeting wordt vereenvoudigd door beide getallen te delen door hun grootste gemene deler: 1920 en 1080 zijn allebei deelbaar door 120, dus dat wordt 16:9. Sommige werkelijke afmetingen zijn niet terug te brengen tot een bekende verhouding. 1366×768 is precies 683:384 en komt heel dicht in de buurt van 16:9. Daarom toont de tool ook de dichtstbijzijnde gangbare verhouding als het verschil minder dan 2 % is. Ook zijn ‘21:9’-monitoren in werkelijkheid 64:27 (2560×1080) of 43:18 (3440×1440); 21:9 is een marketingnaam.
In CSS zorgt aspect-ratio: 16 / 9 ervoor dat een element die vorm behoudt wanneer de breedte verandert. Dat is handig voor video-insluitingen en tijdelijke afbeeldingsvlakken die de lay-out tijdens het laden niet mogen verschuiven.
Voorbeelden
Afmetingen van een videominiatuur
Een miniatuurafbeelding in 16:9 die 1280 pixels breed moet zijn, moet 720 pixels hoog zijn.
De verhouding van een scherm bepalen
2560×1600 vereenvoudigt tot 8:5, hetzelfde als 16:10, een gangbare verhouding voor laptops.
Staande uitsnede voor sociale media
Bij een verhouding van 4:5 en een breedte van 1080 is de hoogte 1350 pixels. Dit portretformaat wordt door veel feeds ondersteund.
Veelgestelde vragen
Is 16:9 hetzelfde als 1,78:1?
Ja. 16 ÷ 9 ≈ 1,778, dus beide geven dezelfde vorm aan. Cinemaformaten worden vaak als decimalen weergegeven, bijvoorbeeld 2,39:1.
Waarom bevat mijn resultaat decimalen?
Niet elke breedte is zonder rest deelbaar door de verhouding. Schakel afronden in voor pixelafmetingen; het resultaat wordt dan afgerond op de dichtstbijzijnde hele pixel en kan een fractie van een pixel afwijken van de exacte verhouding.
Werkt de CSS-eigenschap aspect-ratio overal?
De eigenschap wordt ondersteund in alle huidige grote browsers. Als voor een element ook zowel de breedte als de hoogte expliciet zijn ingesteld, hebben die instellingen voorrang op aspect-ratio.
Privacy
Alle berekeningen worden in uw browser uitgevoerd. Er wordt niets verzonden of opgeslagen.