So nutzt du: Seitenverhältnis-Rechner
- Gib ein Verhältnis ein (oder klicke auf ein gängiges wie 16:9 oder 9:16).
- Trage eine Breite ein, um die passende Höhe zu erhalten – oder eine Höhe, um die Breite zu erhalten.
- Um das Verhältnis eines vorhandenen Bildes oder Bildschirms zu finden, gib seine Größe unter Verhältnis einer Größe ermitteln ein; klicke auf Dieses Verhältnis übernehmen, um damit zu skalieren.
- Kopiere das CSS (
aspect-ratioplus der padding-top-Fallback) und wähle eine Standardgröße aus der Tabelle.
Was ist ein Seitenverhältnis?
Ein Seitenverhältnis ist das proportionale Verhältnis von Breite zu Höhe, geschrieben als Breite:Höhe. Ein Video mit 1920 × 1080 und eines mit 1280 × 720 haben unterschiedliche Größen, teilen sich aber das gleiche 16:9-Verhältnis, sodass sich das eine ohne Strecken oder Beschneiden auf das andere skalieren lässt. Das Verhältnis beim Skalieren beizubehalten, verhindert verzerrte Bilder und schwarze Balken.
Formeln für das Seitenverhältnis
- Neue Höhe = neue Breite × Verhältnis-Höhe ÷ Verhältnis-Breite – z. B. 1280 × 9 ÷ 16 = 720.
- Neue Breite = neue Höhe × Verhältnis-Breite ÷ Verhältnis-Höhe – z. B. 1080 × 16 ÷ 9 = 1920.
- Größe vereinfachen: Teile beide Seiten durch ihren größten gemeinsamen Teiler (ggT). 1920 und 1080 haben einen ggT von 120, was 16:9 ergibt.
Manche Größen lassen sich nicht sauber kürzen: 1366 × 768 (eine gängige Laptop-Auflösung) ergibt 683:384, was annähernd 16:9 ist. Der Rechner zeigt das exakte Verhältnis und das nächstliegende gängige Verhältnis.
Gängige Seitenverhältnisse und ihre Verwendung
| Verhältnis | Dezimal | Typische Verwendung |
|---|---|---|
| 16:9 | 1.778 | HD-/4K-Video, YouTube, Monitore, Präsentationen |
| 9:16 | 0.5625 | Stories, Reels, TikTok, YouTube Shorts |
| 4:3 | 1.333 | Ältere Fernseher und Monitore, iPad, viele Kompaktkameras |
| 3:2 | 1.5 | 35-mm-Film, DSLR-/Spiegellos-Fotos, Surface-Laptops |
| 1:1 | 1 | Quadratische Social-Posts, Profilbilder, Produktminiaturen |
| 4:5 | 0.8 | Hochformat-Feedposts auf Instagram und Facebook |
| 21:9 | ≈ 2.33 | Ultrawide-Monitore, Kinovideos |
| 1.91:1 | 1.91 | Open-Graph-/Link-Vorschaubilder (1200 × 630) |
Seitenverhältnis in CSS
Moderne Browser unterstützen die Eigenschaft aspect-ratio: aspect-ratio: 16 / 9; auf einem Element mit Breite erhält automatisch die passende Höhe – ideal für responsive Video-Einbettungen, Karten und Bildplatzhalter, die Layout-Verschiebungen verhindern (gut für Core Web Vitals CLS). Die ältere Technik ist der padding-top-Trick: ein Wrapper mit height: 0; padding-top: 56.25% (9 ÷ 16 × 100), weil sich vertikale Padding-Prozentwerte auf die Breite des Elements beziehen. Beide werden oben generiert. Für die Bilddateien selbst nutze den Bild-Resizer; für Link-Vorschauen erstellt der OG Image Generator 1200 × 630 Bilder.
Auch gesucht als: seitenverhältnis berechnen, 16:9 rechner, auflösung berechnen, bildverhältnis berechnen, video seitenverhältnis, css aspect-ratio, padding-top trick, 4:3 seitenverhältnis.
Passende Tools zu: Seitenverhältnis-Rechner
- Klemmenrechner — Gib eine Mindest- und Höchstgröße sowie den Ansichtsbereich ein – du erhältst einen zoomfreundlichen clamp() Wert mit einer Erklärung der Berechnung, einer Live-Vorschau und einer vollständigen Skalierung für flüssige Schriftgrößen oder Abstände.
- PX zu REM Umrechner — Rechne zwischen Pixeln, rem und em mit deiner eigenen Root-Schriftgröße um – oder füge ein ganzes Stylesheet ein und konvertiere jeden px-Wert auf einmal.
- Prozentrechner — Sieben alltägliche Prozentrechnungen auf einer Seite.
- Römische-Zahlen-Konverter — Wandle jede Zahl zwischen 1 und 3.999.999 in römische Ziffern um – oder lass dir römische Ziffern wieder in Zahlen umrechnen –, inklusive einer Erläuterung jedes Zeichens.
Häufige Fragen
Wie berechne ich die Höhe aus Breite und Seitenverhältnis?
Ist 1920×1080 16:9?
Welches Seitenverhältnis hat 1080×1350?
Welchen padding-top-Wert hat 16:9?
Soll ich in CSS aspect-ratio oder den Padding-Trick verwenden?
aspect-ratio; es wird von allen aktuellen Browsern unterstützt und braucht keinen Wrapper. Behalte den Padding-Trick nur, wenn du sehr alte Browser wie Safari vor Version 15 unterstützen musst.