Seitenverhältnis-Rechner
Seitenverhältnis aus Breite und Höhe berechnen oder die fehlende Seite ermitteln – mit CSS aspect-ratio und Tailwind-Klasse.
Der Seitenverhältnis-Rechner kürzt Breite und Höhe auf ein Verhältnis wie 16:9 und gibt dazu CSS aspect-ratio, die Tailwind-Klasse und die Padding-Prozente aus. Im zweiten Modus wählst du ein Verhältnis, gibst Breite oder Höhe ein und erhältst die fehlende Seite. Die Berechnung läuft direkt im Browser.
Seitenverhältnis
16:9
Entspricht: Video, YouTube, Hero-Bereiche
Dezimalwert
1.7778
CSS
aspect-ratio: 16 / 9;
Tailwind
aspect-video
Padding-Trick
padding-top: 56.25%;
Für sehr alte Browser ohne aspect-ratio.
Was ist ein Seitenverhältnis?
Das Seitenverhältnis (englisch Aspect Ratio) beschreibt, wie breit ein Bild, Video oder Bildschirm im Verhältnis zur Höhe ist. Es wird als Quotient zweier ganzer Zahlen geschrieben, etwa 16:9. Wer das Verhältnis kennt, kann Medien in jeder Größe darstellen, ohne dass sie verzerrt werden.
Gängige Seitenverhältnisse
| Verhältnis | Typischer Einsatz |
|---|---|
| 1:1 | Quadrat, Profilbilder, Instagram-Feed |
| 4:3 | Klassisches Foto, Präsentationen |
| 3:2 | Kleinbildfoto, Blog-Bilder |
| 16:10 | Laptop-Displays |
| 16:9 | Video, YouTube, Hero-Bereiche |
| 21:9 | Ultrawide, Kino-Look, breite Banner |
| 2:1 | Breite Banner, Social-Vorschaubilder |
| 5:4 | Großformat-Fotos, 8×10 Zoll |
| 4:5 | Instagram-Hochformat |
| 3:4 | Hochformat-Fotos |
| 2:3 | Pinterest, Poster |
| 9:16 | Stories, Reels, TikTok |
So gehst du vor
- Breite und Höhe deines Bildes oder Containers eintragen.
- Das gekürzte Verhältnis ablesen und CSS oder Tailwind-Klasse kopieren.
- Für eine andere Größe wechselst du in den zweiten Modus und gibst nur Breite oder Höhe an.
Beispiel
Ein Hero-Bild im Format 16:9 soll auf einer 1200 px breiten Fläche erscheinen. Der Rechner
liefert 675 px Höhe. Für responsive Ausgabe setzt du aspect-ratio: 16 / 9 und
lässt die Breite flexibel. Passende Bildgrößen für srcset berechnet der Responsive-Bilder-Rechner, Platzhalter in jedem
Format der Platzhalterbild-Generator.
Häufige Fragen
Wie berechne ich das Seitenverhältnis aus Breite und Höhe?
Teile beide Werte durch ihren größten gemeinsamen Teiler. 1920 × 1080 ergibt so 16:9. Der Rechner erledigt das und zeigt zusätzlich den Dezimalwert, hier 1,778.
Wie berechne ich die Höhe bei gegebener Breite?
Multipliziere die Breite mit Höhe geteilt durch Breite des Verhältnisses. Bei 16:9 und 1200 px Breite sind das 1200 × 9 ÷ 16 = 675 px.
Wie nutze ich das Seitenverhältnis in CSS?
Mit der Eigenschaft aspect-ratio, zum Beispiel aspect-ratio: 16 / 9. Das Element behält beim Skalieren sein Verhältnis. Für ältere Browser gibt es den Padding-Trick mit padding-top in Prozent.
Welche Seitenverhältnisse sind im Web üblich?
16:9 für Video und Hero-Bereiche, 4:3 und 3:2 für Fotos, 1:1 für Profilbilder, 4:5 für Instagram-Hochformat und 9:16 für Stories und Reels.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.