CSS-Seitenverhältnis und responsives padding-top berechnen

Geben Sie positive Abmessungen wie 16 und 9 ein und erhalten Sie einen direkt kopierbaren Wert. Das hilft bei älteren Stylesheets, kompatiblen Fallbacks und automatisch erzeugten Mediencontainern auf Basis gespeicherter Maße. Die Berechnung ist deterministisch, speichert keine Daten und liefert im Browser sowie über die API dasselbe Ergebnis.

Abmessungen in responsive Höhe umrechnen

Vertikales CSS-Padding in Prozent bezieht sich auf die Breite des umgebenden Blocks. Dadurch lässt sich bereits vor dem Laden eines Bildes, Videos, iframes oder anderen eingebetteten Elements die passende Höhe reservieren. Der Rechner teilt die angegebene Höhe durch die Breite, multipliziert das Ergebnis mit hundert und ergänzt das Prozentzeichen. Das bekannte Breitbildformat 16 zu 9 ergibt deshalb einen Wert, den Sie unmittelbar in einer padding-top-Deklaration verwenden können. Die Maße müssen weder in Pixeln angegeben werden noch eine große Datei beschreiben. Entscheidend ist nur, dass beide dieselbe Einheit verwenden, denn die Berechnung hängt von ihrem Verhältnis ab. Eine Datei mit 1600 mal 900, ein Vorschaubild mit 160 mal 90 und ein Rahmen mit 16 mal 9 reservieren denselben relativen Raum. Verwenden Sie in beiden Feldern positive, endliche Zahlen. Fehlende, nullwertige, negative oder nicht numerische Angaben werden abgewiesen, damit kein irreführendes oder unbrauchbares CSS entsteht.

Prozentwert als CSS-Fallback einsetzen

Der berechnete Wert ist für das bewährte Muster einer Box mit intrinsischem Seitenverhältnis vorgesehen. Tragen Sie ihn als padding-top des Containers ein, setzen Sie diesen auf position: relative und positionieren Sie das Kindelement absolut, sodass es die reservierte Fläche ausfüllt. Der Container folgt dann der verfügbaren Breite, während das vertikale Padding das gewünschte Verhältnis bewahrt. Modernes CSS bietet die Eigenschaft aspect-ratio, die für neuen Code meist verständlicher ist. Padding-basierte Boxen bleiben jedoch für ältere Stylesheets, Kompatibilitätslösungen, generierte Ausschnitte und bestehende Projekte relevant. Verstehen Sie die Ausgabe als CSS-Text und nicht als neues Zahlenverhältnis. Bei einer Breite von 4 und einer Höhe von 3 geben Sie die Werte in dieser Reihenfolge ein; eine Umkehrung erzeugt bewusst eine Hochformatbox. Das Werkzeug untersucht keine Bilddatei und errät keine Ausrichtung. Es führt ausschließlich die ausdrücklich verlangte, vorhersagbare Umrechnung aus.

Abmessungen wählen und Genauigkeit einordnen

Nutzen Sie die intrinsische Breite und Höhe, wenn der Container zu einer vorhandenen Ressource passen soll, oder Entwurfsmaße für einen geplanten Platzhalter. Große Werte sind zulässig, solange sie positiv und endlich sind; eine proportionale Verkleinerung beider Zahlen ändert das Ergebnis nicht. Auch Dezimalwerte werden unterstützt, etwa wenn das Verhältnis aus Layoutmessungen statt aus ganzzahligen Medienmaßen stammt. Die Ausgabe ist ein kompakter Prozentwert mit genügend signifikanter Genauigkeit für übliche CSS-Layouts. Browser können bei bestimmten Fensterbreiten Subpixel runden. Daher garantiert selbst ein mathematisch genauer Wert nicht, dass jede Kante auf einem vollständigen Gerätepixel liegt. Das ist normales Layoutverhalten und keine Änderung des Seitenverhältnisses. Wo moderne Unterstützung vorhanden ist, sollten Sie aspect-ratio als Hauptregel deklarieren und den berechneten Paddingwert nur als Fallback verwenden. Über die API kostet jede deterministische Anfrage $0.002; im Browser läuft dieselbe reine Berechnung lokal.