Seitenverhältnis-Rechner (Aspect Ratio)
Seitenverhältnis-Rechner (Aspect Ratio) für Bild und Video — berechne Breite oder Höhe unter Beibehaltung des Verhältnisses, bestimme das Seitenverhältnis beliebiger Bilder, erhalte CSS-Code und prüfe Letterbox-Balken. Kostenlos, ohne Anmeldung.
Häufige
Soziale Medien
Druck und Papier
Kino und Video
Breite (px)
1920
Höhe (px)
1080
Megapixel
2.07
Fertiger Code
PNG-Vorlage herunterladen
Erzeugt ein PNG-Bild im exakt gewählten Seitenverhältnis, sauber und ohne Markierungen. Nützlich als Rahmungsvorlage oder Designgrundlage. Die längste Seite beträgt 2048px.
Über dieses Tool
Kostenloser Online-Seitenverhältnis-Rechner (Aspect Ratio) für alle, die mit Video, Design und Webentwicklung arbeiten. Das Tool löst die Proportion zwischen einem Verhältnis (16:9, 4:3, 1:1, 21:9 und Dutzenden weiterer) und den Feldern Breite und Höhe: Eine Abmessung eingeben, die andere wird sofort berechnet, während das Bildverhältnis erhalten bleibt. Das Seitenverhältnis beliebiger Bilder oder Auflösungen lässt sich ebenfalls bestimmen — Breite und Höhe eingeben, und das Tool reduziert automatisch auf die Minimalform. Außerdem liefert es fertigen CSS-Code zum Einfügen, eine Echtzeit-Vorschau und eine Letterbox-Berechnung für den Fall, dass Inhalt in einen Container mit anderem Verhältnis eingepasst wird. Alles läuft im Browser, ohne Anmeldung.
Funktionen
Wie die Seitenverhältnis-Berechnung funktioniert
Ein Seitenverhältnis (Aspect Ratio) ist die Beziehung zwischen Breite und Höhe, geschrieben als zwei durch Doppelpunkt getrennte Zahlen. Bei 16:9 kommen auf 16 Einheiten Breite 9 Einheiten Höhe. Die Berechnung ist eine einfache Proportion: Die Höhe ergibt sich aus Breite × (9 ÷ 16), die Breite aus Höhe × (16 ÷ 9). Um das Verhältnis eines beliebigen Bildes zu bestimmen, teilt man Breite und Höhe durch ihren größten gemeinsamen Teiler — so wird z. B. 1920×1080 auf die Minimalform 16:9 reduziert. Genau dieses Prinzip wendet der Rechner an, um jede Größenänderung verzerrungsfrei zu halten.
Anwendungsfälle
Die häufigsten Einsatzbereiche des Seitenverhältnis-Rechners im Alltag von Personen, die visuellen Content und Code produzieren:
- Videobearbeitung und -exportEinen 4K-Master in HD umwandeln, Ausgabeauflösungen konfigurieren und die korrekte Höhe eines Widescreen-Schnitts finden, ohne das Bild zu verzerren.
- Banner und responsives LayoutDie Höhe eines Banners aus einer festen Breite bestimmen und das CSS aspect-ratio generieren, das die Proportionen auf jedem Bildschirm erhält.
- Social-Media-InhalteStory 9:16 (1080×1920px), Instagram-Feed 4:5 (1080×1350px) und YouTube-Thumbnail 16:9 (1280×720px) vor dem Export korrekt einstellen und ungewollte Zuschnitte bei der Veröffentlichung vermeiden.
- Responsives eingebettetes VideoDas iframe-Muster mit proportionalem Padding generieren, um Videoplayer einzubetten, die sich an die Containerbreite anpassen.
- Performance und Core Web VitalsDie Attribute width und height von Bildern ausfüllen, um Layoutplatz zu reservieren und den kumulativen Layoutversatz (CLS) zu reduzieren.
- Druck und SatzProportionale Abmessungen für A4, Fotos und Druckmaterialien aus einem bekannten Maß berechnen.
Anleitung
Verhältnis wählen
Die zwei Zahlen des Verhältnisses eingeben oder auf eine der nach Kontext geordneten Voreinstellungen klicken. Vorschau und Code aktualisieren sich sofort.
Eine Abmessung eingeben
Breite oder Höhe ausfüllen. Das gegenüberliegende Feld wird automatisch berechnet und das gewählte Verhältnis beibehalten.
Code kopieren
Mit den Kopierschaltflächen das CSS aspect-ratio, die Bildattribute oder das responsive iframe direkt ins Projekt übertragen.
Letterbox prüfen (optional)
Balkenberechnung aktivieren, Containergröße eingeben und sehen, wie viel schwarzer Balken beim Einpassen des Inhalts übrig bleibt.
Häufige Fragen
Das Seitenverhältnis (Aspect Ratio) ist die Beziehung zwischen Breite und Höhe eines Bildes, Videos oder Bildschirms. Es wird als zwei durch Doppelpunkt getrennte Zahlen geschrieben, z. B. 16:9 oder 4:3. Die erste Zahl steht für die proportionale Breite, die zweite für die Höhe. Ein Verhältnis von 16:9 gibt keine tatsächliche Pixelgröße an, nur dass die Breite immer 16/9-mal so groß ist wie die Höhe — egal ob bei einem 1280×720- oder einem 3840×2160-Video.
Breite mit der Verhältnishöhe multiplizieren und durch die Verhältnisbreite dividieren. Für eine Breite von 1200px bei 16:9 lautet die Rechnung 1200 × 9 ÷ 16, was 675px Höhe ergibt. Der Rechner erledigt das automatisch: Verhältnis wählen, Breite eingeben und die Höhe erscheint bereits berechnet. Der umgekehrte Weg — Breite aus der Höhe — folgt derselben Logik mit vertauschten Termen.
Es sind Verhältnisse mit unterschiedlichen Formaten. 4:3 ist fast quadratisch, der Standard alter Fernseher und Monitore. 16:9 ist das aktuelle Widescreen-Format, das in fast allen Online-Videos, im Fernsehen und auf Smartphones im Querformat verwendet wird. 21:9 ist Ultrawide, länger gestreckt, verbreitet bei Produktivitätsmonitoren und in Filmen mit cinematografischer Ästhetik. Je größer der Unterschied zwischen den beiden Zahlen, desto gestreckter und panoramatischer wirkt das Bild.
Es sind die schwarzen Balken, die erscheinen, wenn Inhalt in einem Raum mit anderem Verhältnis angezeigt wird, ohne etwas zu beschneiden. Letterbox bezeichnet die horizontalen Balken oben und unten, die beim Abspielen eines Widescreen-Films auf einem eher quadratischen Bildschirm auftreten. Pillarbox bezeichnet die vertikalen Balken an den Seiten, die erscheinen, wenn ein eher quadratisches Video auf einem Widescreen-Bildschirm gezeigt wird. Der Rechner gibt genau an, wie viele Pixel Balken in jedem Fall übrig bleiben.
Die CSS-Eigenschaft aspect-ratio reserviert den Platz eines Elements im gewünschten Verhältnis, ohne die Höhe festlegen zu müssen. Für einen 16:9-Block genügt aspect-ratio: 16 / 9, und der Browser berechnet die Höhe aus der verfügbaren Breite. Das ist die moderne Methode für responsive Proportionen und ersetzt den alten padding-bottom-Prozenttrick. Der Rechner erzeugt diese Zeile bereits mit den Werten des gewählten Verhältnisses.