Seitenverhältnis-Rechner (Verhältnis beim Skalieren beibehalten)

Lege ein Zielverhältnis und eine Dimension fest; die andere wird automatisch ausgefüllt. Umgekehrte Richtung funktioniert genauso. Nützlich für Video, Fotobeschnitt und responsives Weblayout.

Verhältnis BVerhältnis HBreiteHöhe

Seitenverhältnis: 16:9
Dezimal: 1,7778
Abmessungen: 1920 × 1080

Wie es funktioniert

Was ein Seitenverhältnis ist

Das Seitenverhältnis beschreibt die Breite im Verhältnis zur Höhe: 16:9 bedeutet 16 Einheiten breit für je 9 Einheiten hoch. Das gleiche Verhältnis gilt bei jeder Größe – 1920×1080 und 800×450 sind beide 16:9. Das Seitenverhältnis beim Skalieren beizubehalten verhindert verzerrte Bilder und ist die Grundlage des responsiven Designs.

Ganze Zahlen (16:9) oder Dezimalzahlen (1,78:1) werden als Verhältnis akzeptiert sowie beliebige Werte für Breite/Höhe. Bearbeite ein beliebiges Feld – die anderen werden aktualisiert, um das Verhältnis beizubehalten. Das Dezimalverhältnis (Breite / Höhe) wird für die Verwendung in CSS-calc()-Ausdrücken oder Videobearbeitungs-Tools angezeigt.

Häufige Verhältnisse und wo sie verwendet werden

16:9 – modernes HDTV, Computermonitore, YouTube, die meisten Filme seit 2009. Der Standard für fast alles, was du heute tust.

9:16 – vertikale Videos für Instagram Stories, TikTok, YouTube Shorts. Die Kehrseite von 16:9 für Smartphone-Inhalte.

1:1 – quadratisch. Instagram-Feed-Standard bis 2021. Albumcover, Profilfotos.

4:3 – alte Fernseher und Computermonitore vor HD. Wird noch für einige klassische Inhalte verwendet.

3:2 – DSLR-Kamera-Standard. 35-mm-Film. Größere Abzüge.

21:9 – ultrabreites Kinoformat. Anamorphisch gedrehte Filme. Einige PC-Monitore und LG-Fernseher.

Warum CSS aspect-ratio wichtig ist

Modernes CSS hat aspect-ratio: 16/9; – lege das Verhältnis fest und lass den Browser die Höhe aus der Breite berechnen (oder umgekehrt). Vermeidet den alten padding-bottom-Hack und ist unerlässlich für responsive Einbettungen und Bild-Platzhalter zur Vermeidung von Layout-Verschiebungen.

Cumulative Layout Shift (CLS) ist ein Core Web Vital. Eingebettete Videos, Bilder ohne Abmessungen und Anzeigen können alle CLS verursachen – behebe dies durch Angabe einer expliziten Breite/Höhe (die der Browser zur Berechnung des Seitenverhältnisses verwendet) oder durch Verwendung von CSS aspect-ratio.

Häufige Fragen

›Was ist der Unterschied zwischen 16:9 und 1,78:1?

Dasselbe Verhältnis, unterschiedliche Schreibweise. 16/9 = 1,778. Die Doppelpunkt-Form ist in TV/Web üblich; die Dezimalform ist im Kino üblich.

›Wie behalte ich das Seitenverhältnis in CSS bei?

Verwende die aspect-ratio-Eigenschaft: img { aspect-ratio: 16/9; width: 100%; height: auto; }. Das Bild füllt die Container-Breite und die Höhe passt sich an das Verhältnis an.

›Warum sieht mein Video auf einem 4:3-Fernseher falsch aus?

Die meisten modernen Videos sind 16:9. Auf einem 4:3-Display werden sie entweder mit Letterbox (schwarze Balken), Pillarbox angezeigt oder gestreckt. Die Einstellungen des Fernsehers bestimmen, welche Option gewählt wird.

›Kann ich nicht ganzzahlige Verhältnisse verwenden?

Ja – gib 1,5 oder 2,39 ein. Der Rechner behandelt sie als Dezimalzahlen; die vereinfachte Verhältnisausgabe erscheint nur bei ganzzahligen Verhältnissen.

›Was ist ein 'Pixelseitenverhältnis'?

Ein separates Konzept: die Form eines einzelnen Pixels. Moderne Displays verwenden quadratische Pixel (1:1). Einige ältere SD-Videoformate verwendeten nicht-quadratische Pixel (z. B. 1,0667 für NTSC-Breitbild). Dieser Rechner behandelt das Anzeige-Seitenverhältnis, nicht das Pixel-Seitenverhältnis.

›Was ist der 'Kino-Look'?

21:9 (genauer 2,39:1 oder 2,40:1) – breiter als HDTV. Üblich in modernen Blockbustern. Streaming-Dienste liefern Filme oft in diesem Format.

›Warum verwenden Instagram Reels/TikTok 9:16?

Weil Smartphones typischerweise vertikal gehalten werden. 9:16 füllt den gesamten Smartphone-Bildschirm mit Inhalten; 16:9 hinterlässt Streifen oben und unten auf einem vertikalen Smartphone.

›Verlassen die Daten meinen Browser?

Nein. Die Berechnung läuft lokal.