CSS Aspect Ratio

Deze tool genereert CSS voor een breedte:hoogte-beeldverhouding met behulp van de moderne eigenschap `aspect-ratio` of de klassieke hack met procentuele padding. Het biedt algemene verhoudings-presets, aangepaste breedte-/hoogte-invoer (1-100), een live voorbeeldvak en direct kopieerbare uitvoer. De voorbeeldweergave past de rendering aan de gekozen methode aan, zodat u precies ziet wat elke techniek oplevert.

1. Klik op een Common Ratio-preset (16:9, 4:3, 1:1, 21:9, 3:2, 2:3, 9:16) of voer aangepaste Width en Height (1-100) in. 2. Kies een Method: Modern (`aspect-ratio`) of Padding Hack. 3. Het Preview-vak rendert de verhouding met de gekozen techniek. 4. Klik op Copy in de Output-kaart om de gegenereerde CSS te kopiëren.

Modern levert één regel: `aspect-ratio: <width> / <height>;`. Padding Hack levert een `.container` met `position: relative; width: 100%; padding-top: <height/width*100>%;` en een absoluut gepositioneerde `.content` die deze vult, de legacy-techniek voor omgevingen zonder ondersteuning voor `aspect-ratio`. De voorbeeldweergave gebruikt dezelfde stijlen, afgetopt op een maximale breedte van 400px, zodat het beeld overeenkomt met de techniek die de CSS beschrijft.