Seitenverhältnis-Rechner – Proportionen beibehalten

Was ist ein Seitenverhältnis?

Seitenverhältnis ist die proportionale Beziehung zwischen Breite und Höhe, ausgedrückt als zwei Zahlen getrennt durch einen Doppelpunkt (B:H). Es definiert die Form eines Rechtecks – ob es breit, hoch oder quadratisch ist – ohne eine tatsächliche Größe anzugeben. Seitenverhältnisse sind grundlegend für Fotografie, Videografie, Grafikdesign, Webentwicklung und Display-Herstellung.

Dieser Rechner reduziert jede Breite × Höhe-Paar auf sein einfaches Verhältnis mithilfe des größten gemeinsamen Teilers (GCD)-Algorithmus. Er berechnet auch die richtige neue Höhe, wenn Sie auf eine andere Breite skaliert werden möchten, um sicherzustellen, dass Ihre Bilder und Videos nie gestreckt oder verzerrt erscheinen.

Beide 1920 × 1080 und 3840 × 2160 haben das gleiche 16:9-Seitenverhältnis – sie unterscheiden sich nur in der Auflösung. Dieser Unterschied ist für jeden, der mit digitalen Medien arbeitet, von entscheidender Bedeutung, da das Halten des Seitenverhältnisses bei der Vergrößerung die visuelle Verzerrung verhindert, die als "Verzerrung" oder "Verstreckung" bekannt ist.

Seitenverhältnisse sind überall im täglichen Leben zu finden: auf Ihrem Smartphone-Bildschirm, Ihrem Laptop-Display, den Fotos, die Sie auf sozialen Medien teilen, den Videos, die Sie streamen, und sogar auf den Papiergrößen, die Sie drucken. Das A4-Papierstandard verwendet beispielsweise ein √2:1-Verhältnis (ungefähr 1,414:1), das es ermöglicht, Blätter zu falten, während die gleichen Proportionen erhalten bleiben.

Umgangssprachliche Seitenverhältnisse und ihre Verwendung

Verschiedene Seitenverhältnisse dienen verschiedenen Zwecken in verschiedenen Branchen. Die folgende Tabelle enthält die am häufigsten verwendeten Verhältnisse sowie ihre typischen Anwendungen, damit Sie schnell erkennen können, welches für Ihr Projekt geeignet ist.

Die Filmindustrie verwendet mehrere spezialisierte Seitenverhältnisse jenseits der Standard-TV-Formate. Das Academy-Verhältnis (1,375:1) dominierte die frühe Kinozeit, während moderne Blockbuster entweder 1,85:1 (flache Breitwand) oder 2,39:1 (anamorphose-Breitwand) verwenden. IMAX verwendet 1,43:1, was viel höher ist als die Standard-Breitwand – daher fühlen sich IMAX-Szenen immersiv an.

Wie man ein Bild oder ein Video während der Vergrößerung aufrechterhält

Ein Bild oder ein Video während der Vergrößerung aufrechterhalten, während das Seitenverhältnis erhalten bleibt, erfordert die Fixierung einer Dimension und die Berechnung der anderen Dimension proportional. Die Formeln sind einfach:

• Neue Breite bekannt, Höhe lösen: Neue Höhe = (Originalhöhe × Neue Breite) ÷ Originalbreite
• Neue Höhe bekannt, Breite lösen: Neue Breite = (Originalbreite × Neue Höhe) ÷ Originalhöhe

Beispiel 1: Vergrößern Sie ein 1920 × 1080-Bild auf 1280 Pixel Breite:
Neue Höhe = (1080 × 1280) ÷ 1920 = 720. Ergebnis: 1280 × 720 (immer noch 16:9).

Beispiel 2: Vergrößern Sie ein 4000 × 3000-Foto (4:3) auf eine 1200-Pixel breite Spalte:
Neue Höhe = (3000 × 1200) ÷ 4000 = 900. Ergebnis: 1200 × 900 (immer noch 4:3).

Beispiel 3: Sie benötigen ein Banner mit einer Höhe von 600 Pixeln basierend auf einer 2560 × 1440-Quelle:
Neue Breite = (2560 × 600) ÷ 1440 = 1067. Ergebnis: 1067 × 600 (immer noch 16:9).

Die meisten Bildbearbeitungsprogramme (Photoshop, GIMP, Figma, Canva) enthalten einen "Seitenverhältnis sperren" oder "Proportionen einhalten"-Schalter. Wenn aktiviert, ändert sich die andere Dimension automatisch, wenn eine Dimension geändert wird. Wenn Sie jedoch Werte vor der Öffnung des Bearbeitungsprogramms berechnen müssen – oder Sie arbeiten mit CSS, responsiven Bildern oder Video-Encoding-Einstellungen –, gibt Ihnen dieser Rechner die genauen Werte sofort.

Aspektverhältnisse in der Webentwicklung und CSS

Die moderne Webentwicklung setzt stark auf Aspektverhältnisse für responsive Layouts ab. Die CSS-Eigenschaft aspect-ratio (in allen modernen Browsern seit 2021 unterstützt) ermöglicht es Ihnen, die Proportionen eines Containers direkt zu definieren:

.video-container { aspect-ratio: 16 / 9; width: 100%; }

Dies erstellt einen responsiven Container, der unabhängig von der Bildschirmbreite immer ein 16:9-Verhältnis aufrechterhält – keine mehrere Padding-Bottom-Hacks mehr. Gemeinsame Anwendungsfälle sind:

• Einbettete Videos: YouTube- und Vimeo-Embeds benötigen 16:9-Container, um Letterboxing oder Kadrage zu vermeiden.
• Bildvorschau: Das Festlegen eines Aspektverhältnisses vor dem Laden des Bildes verhindert Cumulative Layout Shift (CLS), ein wichtiger Core Web Vitals-Metriken.
• Kartenlayouts: Produktkarten und Thumbnails sehen konsistent aus, wenn sie das gleiche Aspektverhältnis über einem Grid haben.
• Hero-Sektionen: Vollbreite Banner verwenden oft Aspektverhältnisse wie 3:1 oder 4:1, um auf verschiedenen Bildschirmgrößen eine visuelle Balance zu halten.

Das HTML-Element <img> unterstützt auch die Attribute width und height, die dem Browser Hinweise über das Aspektverhältnis des Bildes geben, bevor es geladen wird, was die Layoutverschiebung weiter reduziert. Setzen Sie diese Attribute immer – Browser verwenden sie, um den richtigen Raum vor dem Laden des Bildes zu reservieren.

Aspektverhältnisse für soziale Medien

Jedes soziale Netzwerk hat empfohlene Aspektverhältnisse für verschiedene Inhaltstypen. Verwenden Sie das falsche Verhältnis, und Ihr Inhalt wird gekürzt, letterboxt oder verliert an Qualität. Hier ist eine umfassende Referenz:

Um die größtmögliche Interaktion zu erzielen, erstellen Sie immer Inhalt im empfohlenen Verhältnis und Auflösung. Hochauflösende Dateien (z. B. 4K für YouTube) laden Sie hoch, um dem Plattformen die Möglichkeit zu geben, die beste Qualität auf großen Bildschirmen bereitzustellen, während sie automatisch für mobile Benutzer skaliert werden.

Die Mathematik hinter der Aspektverhältnisberechnung

Die Berechnung des vereinfachten Aspektverhältnisses erfordert die Ermittlung des Greatest Common Divisor (GCD) der Breite und Höhe und dann die Division beider Werte durch ihn. Der GCD wird mithilfe des euklidischen Algorithmus berechnet – eines der ältesten Algorithmen der Mathematik, der auf 300 v. Chr. zurückgeht.

Schritt-für-Schritt-Beispiel für 1920 × 1080:

• GCD(1920, 1080): 1920 mod 1080 = 840
• GCD(1080, 840): 1080 mod 840 = 240
• GCD(840, 240): 840 mod 240 = 120
• GCD(240, 120): 240 mod 120 = 0 → GCD = 120

Dividiere: 1920 ÷ 120 = 16, 1080 ÷ 120 = 9 → Verhältnis = 16:9

Bei nicht-standardmäßigen Abmessungen wie 1366 × 768 (eine sehr gängige Laptopauflösung) ist der GCD 2, was 683:384 ergibt – was sich nicht auf ein sauberes Verhältnis vereinfacht. In der Praxis approximiert sich diese Auflösung 16:9 (die genaue 16:9 bei dieser Breite wäre 1366 × 768,375). Hersteller runden auf ganze Pixel ab, weshalb einige "16:9"-Bildschirme leicht unvollständige Verhältnisse haben.

Das dezimale Verhältnis (Breite ÷ Höhe) ist ein weiterer nützlicher Weg, Aspektverhältnisse auszudrücken. Es erleichtert die Vergleichbarkeit: 16:9 = 1,778, 4:3 = 1,333, 21:9 = 2,333. Ein höheres Dezimalwert bedeutet eine breitere Rechteck.