Skip to main content

Aspect Ratio Calculator

Calculate and visualize aspect ratios for any dimensions.

Geprüft von · Zuletzt geprüft

16:9
Aspect Ratio16:9
Decimal1.7778
Dimensions1920 x 1080
CSS
aspect-ratio: 16 / 9;

Den Seitenverhältnisrechner verwenden

  1. Breite und Höhe eingeben in den Pixel-Feldern. Das vereinfachte Verhältnis erscheint sofort neben den Eingaben - zum Beispiel reduziert 1920 x 1080 auf 16:9.
  2. Eine Voreinstellung wählen aus den gängigen Verhältnis-Schaltflächen (16:9, 4:3, 21:9, 1:1, 9:16), um beide Eingaben mit einem bekannten Verhältnis in einer vernünftigen Pixel-Größe zu füllen.
  3. Die Sperre umschalten, um das Verhältnis beizubehalten, während man eine Dimension anpasst. Die Breite zu ändern berechnet die Höhe automatisch neu und umgekehrt.
  4. Das CSS-Snippet kopieren, das unter dem Verhältnis angezeigt wird: aspect-ratio: 16 / 9;, bereit zum Einfügen in ein Stylesheet oder einen Tailwind-Arbiträr-Wert wie [aspect-ratio:16/9].
  5. Vergrößern oder verkleinern, indem man beide Eingaben mit demselben Faktor multipliziert; das Verhältnis bleibt 16:9, egal ob die Auflösung 1280 x 720 oder 7680 x 4320 ist.

Was die Vereinfachung tut

Gegeben Breite w und Höhe h ist das vereinfachte Verhältnis w / g : h / g, wobei g = ggT(w, h). Der ggT wird mit dem Euklidischen Algorithmus berechnet, derselben Routine, die den dedizierten ggT-Rechner auf dieser Seite antreibt; er läuft in O(log min(w, h)) Divisionen und ist für jedes Paar von Pixel-Abmessungen effektiv sofort. Für 1920 und 1080 ist der ggT 120 und das Verhältnis reduziert sich auf 16:9.

Das Werkzeug gibt auch den CSS-aspect-ratio-Eigenschaftswert aus, spezifiziert in CSS Sizing Level 4 und in jedem modernen Browser seit Chrome 88, Firefox 89 und Safari 15.4 unterstützt. Die Eigenschaft nimmt entweder ein einzelnes <ratio> (16 / 9) oder das Schlüsselwort auto an und reserviert Layout-Platz, um den kumulativen Layout-Shift (CLS) zu verhindern, während ein Bild oder iFrame lädt. Alles wird in der Preact-Komponente berechnet - kein Netzwerkaufruf, keine Persistenz.

Wann ein Verhältnisrechner Zeit spart

  • Eine Thumbnail-Größe wählen, die mit einem YouTube-Video in 16:9 ohne Verzerrung übereinstimmt.
  • Einen responsiven Hero-Image-Container entwerfen, bei dem das Seitenverhältnis über Viewport-Breiten hinweg gesperrt bleiben muss.
  • Ein Logo für ein vertikales Story-Format (9:16) ohne Beschneiden oder Stauchen skalieren.
  • Prüfen, ob ein Kinotrailer (2,39:1) letterboxed in einen 16:9-TV-Rahmen passt.
  • Bild-Kachel-Größenverhältnisse für ein Foto-Raster normalisieren, bei dem alle Kacheln ein Verhältnis teilen müssen.
  • Zwischen einem Kamerasensor-Verhältnis (3:2) und einem Druckverhältnis (5:7 oder 8:10) konvertieren, bevor man bestellt.

Fallstricke und Präzisionshinweise

  • Gerundete Pixel-Abmessungen verlieren genaue Verhältnisse. 854 x 480 ist eine übliche 480p-Größe, aber das echte Verhältnis ist 16,025:9; die ggT-Reduzierung ergibt 427:240, nicht 16:9. Das Verhältnis zuerst sperren, dann eine Breite wählen, die durch 16 teilbar ist, um saubere Ganzzahlen zu erhalten.
  • Dezimaleingaben werden abgelehnt. Die Vereinfachung setzt ganzzahlige Pixel-Abmessungen voraus; eine Dezimaleingabe deutet darauf hin, dass man wahrscheinlich in einer anderen Einheit arbeitet.
  • CSS-aspect-ratio ist keine harte Beschränkung. Wenn der Inhalt des Elements mehr Platz benötigt (zum Beispiel eine lange Textzeichenkette), wächst das Element trotzdem, und das Verhältnis wird zu einem bevorzugten Aspekt statt einem erzwungenen.
  • In eine Aspect-Ratio-Box skalierte Bilder benötigen immer noch object-fit: cover oder contain; die Aspect-Ratio-Eigenschaft allein verhindert kein Letterboxing oder Beschneiden.
  • 9:16 vs. 16:9 ist wichtig. Hochformat-Video für TikTok und Reels ist 9:16 (Breite:Höhe); Querformat-Video für YouTube ist 16:9. Die Voreinstellungs-Schaltflächen machen das explizit, um Verwechslungen zu vermeiden.
  • Sehr alte Browser (vor-2021-Safari, vor-2021-Edge Legacy) können das nativ nicht unterstützen und fallen auf den Padding-Bottom-Hack zurück; das generierte CSS-Snippet ist für moderne Browser ausgelegt.

Wie Verhältnisse zum Standard wurden

Das 4:3-Verhältnis stammt von Thomas Edisons 35-mm-Film-Rahmen von 1892 (1,33:1) und überdauerte bis ins frühe Fernsehen (NTSC bei 4:3). Das 16:9-HDTV-Verhältnis, standardisiert von SMPTE in den 1980er Jahren als Kompromiss zwischen 4:3-TV und breiteren Kinoformaten, ist das geometrische Mittel von 4:3 und 2,35:1 und wurde gewählt, um Inhalte aus beiden gut aussehen zu lassen. Kinoformate umfassen 2,39:1 (Anamorphic Scope), 1,85:1 (Standard Flat) und IMAX bei etwa 1,43:1. Mobiltelefonbildschirme wechselten um 2017 zu 19,5:9 und 20:9, um mehr in einen schmaleren handgehaltenen Rahmen zu passen. Die CSS-aspect-ratio-Eigenschaft trat 2019 in den W3C-CSS-Sizing-Module-Level-4-Entwurf ein und wurde bis 2022 baseline-unterstützt. ISO 23091-2 definiert Seitenverhältnis für Video-Codecs.

Browser-Werkzeug vs. Design-Apps

Photoshop, Figma, Sketch und Affinity Designer haben alle Beschnitt-Werkzeuge, die ein Verhältnis interaktiv durchsetzen; Final Cut, Premiere und DaVinci Resolve machen dasselbe für Video. Für responsives Webdesign ist modernes CSS-aspect-ratio mit einem Rechner wie diesem einfacher als der alte Padding-Bottom-Hack (der padding-top: 56,25 % verwendete, um 16:9 zu emulieren). Tailwind CSS liefert ein aspect-ratio-Plugin, aber die Arbiträr-Wert-Syntax [aspect-ratio:16/9] funktioniert auch ohne. Das Browser-Werkzeug gewinnt bei schneller Nachschlag und CSS-Snippet-Generierung; eine Design-App gewinnt, wenn das Verhältnis auf ein tatsächliches Bild oder Video mit Beschneiden und Rendering angewendet werden muss.

Häufig gestellte Fragen

Wie vereinfacht der ggT das Verhältnis?

Der Rechner berechnet ggT(Breite, Höhe) mit dem Euklidischen Algorithmus und teilt beide Zahlen durch diesen ggT. Bei 1920 x 1080 ist der ggT 120, und 1920/120 : 1080/120 = 16:9. Die Reduzierung durch den ggT erzeugt immer die kanonische kleinste Form; jeder andere gemeinsame Faktor zwischen Breite und Höhe würde ein reduzierbares Verhältnis wie 32:18 hinterlassen.

Was macht die CSS-aspect-ratio-Eigenschaft tatsächlich?

Sie reserviert eine bevorzugte Boxform für ein Element, damit der Browser umliegenden Inhalt anordnen kann, bevor die intrinsische Größe des Elements bekannt ist. Das beseitigt den Layout-Shift, der bisher bild-intensive Seiten plagten. Spezifiziert in CSS Sizing Level 4, wird sie in Chrome 88, Firefox 89, Safari 15.4 und Edge 88 unterstützt und ist jetzt baseline weit verfügbar. Die Eigenschaft nimmt ein Verhältnis wie <code>16 / 9</code> oder das Schlüsselwort <code>auto</code> an.

Werden meine Breiten- und Höhenwerte hochgeladen?

Nein. Der Rechner läuft vollständig im Browser-Tab. Es gibt keinen Server-Aufruf zur Berechnung des ggT, keinen Analytics-Beacon, der die Eingaben trägt, und keinen Speicher, der das Ergebnis persistiert. Die "CSS kopieren"-Schaltfläche schreibt in die Clipboard-API, was eine lokale Browser-Funktion ist.

Warum ergibt 854 x 480 nicht 16:9?

854 / 480 = 1,7791..., während 16 / 9 = 1,7777... exakt. Die beiden sind nahe, aber nicht gleich, sodass die ggT-basierte Reduzierung ein anderes kleinst-Verhältnis ergibt. 854 x 480 ist eine übliche "480p"-Kodiergröße, die absichtlich auf ein Vielfaches von 16 für Codec-Ausrichtung rundet und das genaue 16:9-Verhältnis opfert. Für echtes 16:9 bei 480-Pixel-Höhe 853,33 verwenden oder auf 848 x 480 oder 864 x 486 runden.

Was ist der Unterschied zwischen object-fit und aspect-ratio?

<code>aspect-ratio</code> legt die Form des Containers fest. <code>object-fit</code> steuert, wie ein Bild oder Video in diesem Container skaliert wird: <code>cover</code> füllt die Box und schneidet Überschuss ab, <code>contain</code> zeigt das gesamte Bild und fügt leere Streifen hinzu, <code>fill</code> dehnt (normalerweise hässlich). Die beiden arbeiten zusammen: der Container reserviert Platz mit dem Verhältnis, und object-fit entscheidet, wie das Medium darin platziert wird.

Funktioniert die aspect-ratio-Eigenschaft bei Hintergrundbildern?

Ja, in dem Sinne, dass die Eigenschaft das Element skaliert; das Hintergrundbild wird dann durch seine eigene <code>background-size</code>-Eigenschaft platziert. Für <code>background-size: cover</code> füllt der Hintergrund den durch das Seitenverhältnis reservierten Bereich genau aus. Für <code>background-size: contain</code> wird das Bild mit Letterboxing innen platziert. Die Eigenschaft ändert nicht, wie Hintergründe positioniert werden, nur die Container-Form.

Was ist mit dem Padding-Bottom-Hack, der zuvor verwendet wurde?

Vor dem nativen <code>aspect-ratio</code> wurden responsive Container-Formen mit <code>padding-top: 56,25 %</code> (für 16:9) auf einem Wrapper gefälscht, weil prozentuales Padding gegen die enthaltende Breite berechnet wird. Der Hack ist immer noch abwärtskompatibel mit sehr alten Browsern, kann aber nicht mit expliziter Höhe kombiniert werden und erfordert ein umwickelndes Element. Modernes CSS <code>aspect-ratio</code> ist sauberer und wird überall unterstützt; den Hack nur verwenden, wenn ältere Browser als 2021 unterstützt werden müssen.

Warum wird 21:9 manchmal als 43:18 angezeigt?

Echtes cinematisches Ultrabreit ist 2,370:1, was sich genau auf 21:9 reduziert, nur wenn die Quelle so gewählt wurde. Eine übliche Monitorauflösung ist 2560 x 1080; 2560/1080 = 2,370..., und die ggT-Reduzierung ergibt 64:27, nicht exakt 21:9. Hersteller vermarkten das Verhältnis als "21:9", weil 64:27 keine erkennbare Zahl ist; beide Bezeichnungen sind vertretbar. Das Werkzeug meldet was die ggT-Reduzierung tatsächlich ergibt.

Kann ich eine nicht ganzzahlige Zahl wie 16,2 einfügen?

Nicht in der aktuellen Benutzeroberfläche, die ganzzahlige Pixel-Anzahlen erwartet. Wenn die Quelle eine skalierte CSS-Einheit (em, rem, vw) oder eine Video-Messung in Welt-Einheiten ist, zuerst das ganzzahlige Pixel-Äquivalent berechnen. Für echte nicht-ganzzahlige Verhältnisse sie direkt in das CSS schreiben: <code>aspect-ratio: 2,39 / 1;</code> ist gültige Syntax.

Was sind gängige Videoschnitt-Verhältnisse?

Altes TV war 4:3 (1,333:1). HD und die meisten Streamings sind 16:9 (1,778:1). Flat Cinema ist typischerweise 1,85:1. Anamorphic Scope ist 2,39:1. IMAX ist etwa 1,43:1. Vertikaler mobiler Inhalt ist 9:16. Quadratisch (Instagram- Raster) ist 1:1. Stories und Reels sind 9:16. Jedes hat seine eigene Voreinstellung im Werkzeug, sodass man zu einem Standardverhältnis springen und von dort skalieren kann.

Mehr CSS & Design

Blob Shape Generator

Generate organic blob shapes as SVG.

Open tool

Border Radius Generator

Create CSS border-radius with a visual corner editor.

Open tool

CSS Box Shadow Generator

Create CSS box shadows with a visual editor. CSS box-shadow generator, shadow maker and box-shadow builder with live preview, multi-layer support and Material elevation presets.

Open tool

Color Palette Generator

Generate harmonious color palettes, Tailwind-style 50-900 scales and design-system tokens from any base hex color. Also a hex color palette generator (Farbpalette Generator auf Deutsch).

Open tool

Color Picker

Pick colors visually and get HEX, RGB, and HSL values.

Open tool

CSS Animation Generator

Create CSS keyframe animations with presets and visual preview. Doubles as an animate-CSS generator and keyframe maker.

Open tool