UTILS.
Privat von Anfang an
▭

CSS-Seitenverhältnis-Box

Erzeugen Sie eine responsive Seitenverhältnis-Box mit Padding-Fallback.

Deine Dateien bleiben auf diesem Gerät

Dateien werden im Browser verarbeitet, nie hochgeladen. Die Website lädt den benötigten Code und die Ressourcen herunter. Ohne Konto und Tracker.

Speichere dieses Tool über Herunterladen als einzelne HTML-Datei zur Offline-Nutzung.

Datenschutz →

Über dieses Tool

Geben Sie ein Breiten- und Höhenverhältnis ein, um eine responsive Seitenverhältnis-Box zu erzeugen, sowohl mit dem modernen aspect-ratio-CSS als auch mit einem padding-top-Prozent-Fallback, alles direkt in Ihrem Browser.

Häufig gestellte Fragen

Warum einen padding-top-Fallback einbinden?
Der padding-top-Prozent-Trick reproduziert ein festes Seitenverhältnis in älteren Browsern, die die moderne aspect-ratio-Eigenschaft nicht unterstützen.
Wird das Verhältnis vereinfacht?
Ja – Werte wie 16 und 9 werden durch ihren größten gemeinsamen Teiler gekürzt, sodass 1920 zu 1080 als 16 / 9 angezeigt wird.

Weitere Tools