Aspect ratio is de verhouding tussen de breedte en de hoogte van een element, geschreven als twee getallen met een dubbele punt ertussen, zoals 16:9 of 4:3. Het beschrijft de vorm van een vlak los van het echte formaat, dus een 16:9-thumbnail en een 16:9-bioscoopscherm hebben dezelfde vorm op een andere schaal.
Een foto is het makkelijkste voorbeeld. Print een staande kiek om in een vierkante lijst te passen en óf de zijkanten worden weggesneden óf het gezicht wordt platgedrukt. Het web heeft hetzelfde probleem: zet een brede banner in een hoog vak en hij vervormt. Een vaste aspect ratio aanhouden houdt afbeeldingen recht en, net zo handig, laat de browser de juiste ruimte reserveren voordat een foto laadt, zodat de pagina niet verspringt. Daarmee is verhouding een stil maar echt onderdeel van responsive design en een belangrijk detail voor elk raster met productfoto’s.
Veelvoorkomende verhoudingen hebben elk hun plek: 16:9 voor video, 1:1 voor social-tegels en avatars, 4:5 voor staande posts. Er één kiezen en daaraan vasthouden is wat een galerij of een card-layout ordelijk laat aanvoelen.
In CSS leg je dit makkelijk vast. De aspect-ratio-eigenschap laat een vlak bijvoorbeeld op 16:9 blijven, hoe breed het scherm ook wordt, en in combinatie met object-fit: cover snijd je een afwijkende foto netjes bij in plaats van hem uit te rekken. De keuze heeft ook een inhoudelijke kant: een hoge 4:5-foto neemt meer verticale ruimte in en duwt andere elementen omlaag, terwijl een brede 16:9 rustiger leest. Een verhouding kiezen is deels een layoutbeslissing en deels een redactionele.
Bij TopDevs leggen we consistente aspect ratio’s vast in de beeldbibliotheek en sjablonen van een klant, wat galerijen netjes houdt en voorkomt dat de layout verspringt terwijl foto’s laden.
