CSS-aspektforhold

Dette verktøyet genererer CSS for et bredde:høyde-sideforhold ved å bruke enten den moderne `aspect-ratio`-egenskapen eller det klassiske prosentvis-padding-hacket. Det gir vanlige forholdsforhåndsinnstillinger, egendefinerte bredde/høyde-inndata (1-100), en live forhåndsvisningsboks og kopier-klar utdata. Forhåndsvisningen tilpasser gjengivelsen til den valgte metoden, slik at du kan se nøyaktig hva hver teknikk produserer.

1. Klikk på en Common Ratio-forhåndsinnstilling (16:9, 4:3, 1:1, 21:9, 3:2, 2:3, 9:16) eller skriv inn egendefinert bredde og høyde (1-100). 2. Velg en metode: Modern (`aspect-ratio`) eller Padding Hack. 3. Forhåndsvisningsboksen gjengir forholdet med den valgte teknikken. 4. Klikk Copy på Output-kortet for å kopiere den genererte CSS-en.

Modern sender ut én linje: `aspect-ratio: <width> / <height>;`. Padding Hack sender ut en `.container` med `position: relative; width: 100%; padding-top: <height/width*100>%;` og et absolutt plassert `.content` som fyller den, som er den eldre teknikken for miljøer uten `aspect-ratio`-støtte. Forhåndsvisningen bruker de samme stilene, begrenset til 400px maks bredde, slik at det visuelle matcher teknikken CSS-en beskriver.