CSS-Absatzverhältnis

Dieses Tool erzeugt CSS für ein Breite:Höhe-Seitenverhältnis, entweder mit der modernen `aspect-ratio`-Eigenschaft oder dem klassischen Prozent-Padding-Hack. Es bietet häufige Verhältnis-Voreinstellungen, benutzerdefinierte Breiten-/Höheneingaben (1-100), ein Live-Vorschaufeld und eine kopierfertige Ausgabe. Die Vorschau passt ihre Darstellung an die gewählte Methode an, sodass Sie genau sehen, was jede Technik erzeugt.

1. Klicken Sie auf eine Common Ratio-Voreinstellung (16:9, 4:3, 1:1, 21:9, 3:2, 2:3, 9:16) oder geben Sie benutzerdefinierte Width und Height (1-100) ein. 2. Wählen Sie eine Method: Modern (`aspect-ratio`) oder Padding Hack. 3. Das Preview-Feld rendert das Verhältnis mit der gewählten Technik. 4. Klicken Sie in der Output-Karte auf Copy, um das erzeugte CSS zu kopieren.

Modern gibt eine einzelne Zeile aus: `aspect-ratio: <width> / <height>;`. Padding Hack gibt einen `.container` mit `position: relative; width: 100%; padding-top: <height/width*100>%;` und ein absolut positioniertes `.content` aus, das ihn ausfüllt – die klassische Technik für Umgebungen ohne `aspect-ratio`-Support. Die Vorschau verwendet dieselben Styles, begrenzt auf eine maximale Breite von 400px, sodass das Visuelle mit der Technik übereinstimmt, die das CSS beschreibt.