Seitenverhältnis-Rechner

Seitenverhältnisse verstehen

Ein Seitenverhältnis beschreibt das proportionale Verhältnis zwischen Breite und Höhe eines Bildes oder Videos, ausgedrückt als zwei durch einen Doppelpunkt getrennte Zahlen. 16:9 bedeutet: Für je 16 Pixel Breite gibt es 9 Pixel Höhe. Seitenverhältnisse sind dimensionslos — 1920×1080 und 1280×720 sind beide 16:9, weil sie dieselbe Proportion teilen.

Häufige Verhältnisse und ihre Einsatzbereiche

• 16:9 (1,78:1) — Der universelle Standard für Breitbild-Video: YouTube, Netflix, Vimeo, Twitch, TV-Sendungen, Desktop-Monitore, Laptop-Bildschirme.
• 4:3 (1,33:1) — Älterer TV- und Monitorstandard. Wird noch für Präsentationen, manche iPad-Apps und Standard-Definition-Video verwendet.
• 1:1 — Quadratformat. Instagram-Feed, Profilfotos, Album-Cover. Starke visuelle Wirkung, gleich breit wie hoch.
• 9:16 (0,56:1) — Vertikales Video für TikTok, Instagram Reels und Stories, YouTube Shorts. Das Format für den mobilen Vollbildschirm.
• 4:5 (0,8:1) — Instagram-Hochformat-Beiträge im Feed. Höher als quadratisch, zeigt mehr Inhalt ohne ganz vertikal zu werden.
• 21:9 (2,33:1) — Kinematisches Ultrabreitformat. Im Kino (2,39:1-Scope) und auf Ultrawide-Monitoren genutzt.
• 3:2 (1,5:1) — Klassisches 35-mm-Filmformat und viele Digitalkameras. Proportionen von Standard-Fotoabzügen.

Seitenverhältnis beim Skalieren beibehalten

Um ein Bild unter Beibehaltung des Verhältnisses zu skalieren, beide Abmessungen mit demselben Faktor multiplizieren. Proportionale Höhe für eine neue Breite berechnen: Neue Höhe = (Neue Breite / Originalbreite) × Originalhöhe.

Beispiel: 1920×1080 auf 1280 Pixel Breite skalieren: 1080 × (1280 / 1920) = 1080 × 0,667 = 720 Pixel. Das Ergebnis 1280×720 behält das 16:9-Verhältnis bei.

CSS-Eigenschaft aspect-ratio

Die CSS-Eigenschaft aspect-ratio (in allen modernen Browsern seit 2021 unterstützt) ermöglicht es, das gewünschte Verhältnis eines Elements ohne Kenntnis beider Abmessungen anzugeben. Setzt man aspect-ratio: 16 / 9 auf einem Container und gibt nur eine width an, berechnet der Browser die korrekte Höhe automatisch. Das ersetzt ältere Padding-Prozentsatz-Techniken.

Häufig gestellte Fragen

• Was ist ein Seitenverhältnis?
  Ein Seitenverhältnis beschreibt das proportionale Verhältnis zwischen Breite und Höhe eines Bildes oder Videos, ausgedrückt als zwei Zahlen (z. B. 16:9). Ein Verhältnis von 16:9 bedeutet: Die Breite beträgt 16 Einheiten je 9 Einheiten Höhe.
• Welches Seitenverhältnis hat ein YouTube-Standardvideo?
  YouTubes Standardverhältnis ist 16:9. Empfohlene Auflösung: 1920×1080 (Full HD). Vorschaubilder sollten mindestens 1280×720, empfohlen 1920×1080 sein.
• Welches Seitenverhältnis verwendet Instagram?
  Instagram unterstützt 1:1 (quadratisch, 1080×1080), 4:5 (Hochformat-Feed, 1080×1350) und 9:16 (Stories/Reels, 1080×1920).
• Wie behalte ich das Seitenverhältnis beim Skalieren bei?
  Neue Höhe = (Neue Breite / Originalbreite) × Originalhöhe. In CSS: aspect-ratio: 16 / 9 setzen und nur eine Abmessung angeben — der Browser berechnet die andere automatisch.
• Was bedeutet 16:9 in Pixeln?
  Häufige 16:9-Auflösungen: 1280×720 (HD), 1920×1080 (Full HD), 2560×1440 (QHD), 3840×2160 (4K UHD), 7680×4320 (8K UHD). Alle Abmessungen, bei denen Breite ÷ Höhe = 1,778 ergibt, sind 16:9.
• Was bewirkt die CSS-Eigenschaft aspect-ratio?
  Die CSS-Eigenschaft aspect-ratio legt das bevorzugte Verhältnis eines Elements fest. Setzt man aspect-ratio: 16 / 9 und nur eine Breite, berechnet der Browser die Höhe automatisch. In allen modernen Browsern seit 2021 unterstützt.