CSS aspect-ratio

Dette værktøj genererer CSS for en bredde/højde-aspektforhold ved at bruge enten den moderne `aspect-ratio`-eigenskab eller den klassiske procent- og padding-trick. Det tilbyder algemme forholdspresetter, egenindstillinger for bredde/højde (1-100), en live-preview-box og output, der er klar til at kopies. Previewen anpasser sin visning til den valgte metode, så du kan se præcist, hvad hver teknik giver.

1. Klik på en fordefineret forhold (16:9, 4:3, 1:1, 21:9, 3:2, 2:3, 9:16) eller indtast egne bredde og højde (1–100). 2. Vælg en metode: Modern (`aspect-ratio`) eller Padding Hack. 3. Vigtigvisningsfeltet viser forholdet med den valgte teknik. 4. Klik på Kopier på output-kortet for at kopiere den genererede CSS.

Modern giver ud af en enkelt linje: `aspect-ratio: <width> / <height>;`. Padding Hack giver ud af en `.container` med `position: relative; width: 100%; padding-top: <height/width*100>%;` og en absolut positioneret `.content`, der fylder den – det er den gamle metode for miljøer uden `aspect-ratio`-støtte. Visningen bruger samme stiler, med en maksimal bredde på 400px, så visuel udseendet overensstemmer med den teknik, CSS beskriver.