Wat is Aspect Ratio Placeholder Calculator?
Aspect-ratio is een CSS-eigenschap die een gewenste beeldverhouding voor een element instelt, zodat de browser de hoogte kan berekenen op basis van de breedte voordat inhoud wordt geladen. Dit voorkomt Cumulative Layout Shift (CLS), een Core Web Vitals-metriek die visuele stabiliteit meet. Door de juiste ruimte voor afbeeldingen, video's en inbeddingen van tevoren te reserveren, blijft de paginalay-out stabiel terwijl bronnen worden geladen.
Snel antwoord
Bereken de CSS-aspect-ratio-waarde en het padding-bottom-terugvalpercentage om Cumulative Layout Shift te voorkomen. Reserveer de juiste ruimte voor afbeeldingen, video's en inbeddingen voordat ze worden geladen.
Last updated: 2026-06-11
Beperkingen
- De padding-bottom-terugvaltechniek vereist position: relative op de bovenliggende container en position: absolute op het onderliggende element voor correct formaatgedrag.
- Aspect-ratio werkt alleen wanneer het element een gedefinieerde breedte heeft. Als de elementbreedte auto is of niet is ingesteld, heeft de aspect-ratio-berekening geen basis om de hoogte te berekenen.
- Het gebruik van aspect-ratio zonder een gedefinieerde breedte of hoogte op afbeeldingen kan Cumulative Layout Shift veroorzaken tijdens het laden van de pagina. Stel altijd een breedte- of hoogte-attribuut in op img-elementen of een expliciete CSS-dimensie naast aspect-ratio, zodat de browser ruimte kan reserveren voordat de afbeelding wordt geladen.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Selecteer een vooraf ingestelde verhouding zoals 16:9, 4:3 of 1:1, of voer aangepaste breedte- en hoogtewaarden in.
- Bekijk de gegenereerde CSS-aspect-ratio-waarde voor moderne browsers.
- Kopieer de padding-bottom-terugval voor browsers die de aspect-ratio-eigenschap niet ondersteunen.
- Pas de wrapper-opmaak toe op uw afbeelding of inbeddingselement. De tijdelijke aanduiding reserveert de juiste hoogte voordat de bron wordt geladen.
Waarvoor je het kunt gebruiken
- Ruimte reserveren voor hero-afbeeldingen op blogberichten, zodat de lay-out niet verspringt wanneer de afbeelding wordt geladen.
- Stabiele video-inbeddingscontainers maken voor YouTube- of Vimeo-iframes die de beeldverhouding van de speler behouden.
- Tijdelijke aanduidingsboxen bouwen voor lui geladen afbeeldingen in een galerijraster.