Ich habe einmal ein WordPress-Thema verschickt, bei dem jedes vorgestellte Bild auf dem Handy so aussah, als wäre es durch eine Mangle gegangen. Gesichter gestreckt, Logos gequetscht. Die Ursache waren drei Zeichen in einer CSS-Datei: a height: 240px neben einem sitzen width: 100%drohen Auf einem 375-Pixel-Telefon, das ein Verhältnis von ungefähr 1,56: 1 und die Bilder 16: 9 - 1,78: 1 ergab. Kein großer Unterschied auf dem Papier. sehr offensichtlich auf einem menschlichen Gesicht.
Das Seitenverhältnis ist eines der Dinge, die sich zu einfach anfühlen, um falsch zu verstehen, also überprüft niemand es noch einmal. Es ist eine einzelne Abteilung. Und doch ruiniert es leise Videoexporte, Opengraph-Vorschauen, die an der falschen Stelle beschnitten werden, Miniaturansichten mit schwarzen Balken und Heldenbilder, die auf Ihrem 27-Zoll-Monitor gut aussehen und auf einem Telefon schrecklich. Die Mathematik ist trivial, die Kosten für einen Rundungsfehler sind es nicht.
Ich baue toolz.dev Und ich mache diese Berechnung ständig - Größe von Bildern für die Admin-Bildschirme eines Plugins, exportieren Videos im Reels-Format und Herausfinden, was ein Opengraph-Bild eigentlich sein sollte. Also habe ich das gebaut Seitenverhältnis-Rechner es in einem Bereich zu tun und seine Arbeit zu zeigen. Geben Sie ihm ein Verhältnis und eine Dimension, es gibt Ihnen die andere. Geben Sie ihm eine Größe, es reduziert es auf das Verhältnis und sagt Ihnen, wie dieses Verhältnis genannt wird.
tl; dr: Das Seitenverhältnis ist die Breite geteilt durch die Höhe, geschrieben als zwei Zahlen mit einem Doppelpunkt. So finden Sie eine fehlende Höhe:
width × (ratioHeight ÷ ratioWidth)drohen So finden Sie eine fehlende Breite:height × (ratioWidth ÷ ratioHeight)drohen Um das Verhältnis aus einer Größe zu erhalten, teilen Sie beide Zahlen durch ihren größten gemeinsamen Teiler - 1920 und 1080 teilen sich eine GCD von 120, die 16: 9 ergibt. der Seitenverhältnis-Rechner Alle drei in Ihrem Browser, mit Voreinstellungen für 16:9, 9:16, 1:1, 4:3, 3:2, 21:9, 1,91:1 und 2,39:1.
Was ist ein Seitenverhältnis?
Ein Seitenverhältnis ist die proportionale Beziehung zwischen der Breite eines Bildes und seiner Höhe. Es wird als zwei durch einen Doppelpunkt getrennte Zahlen geschrieben - 16: 9, 4: 3, 1: 1 - und was es beschreibt, ist formen, nicht Größe.
Diese Unterscheidung ist das ganze Spiel. 1280 × 720, 1920 × 1080 und 3840 × 2160 sind drei verschiedene Auflösungen mit einem Seitenverhältnis. Sie haben die gleiche Form bei drei Größen, weshalb jeder von ihnen ohne Verzerrung oder Beschneiden in eine andere skaliert. Inzwischen haben 1920 × 1080 und 1920 × 1200 fast die gleiche Breite, unterscheiden sich um 120 Pixel und haben grundsätzlich unterschiedliche Formen - einer ist 16: 9, der andere ist 16:10 und legt Inhalte für einen in einen Container, der für die anderen gebaut wurde, bedeutet Briefboxen oder eine Ernte.
Das Verhältnis ist nur die Breite ÷ Höhe, ausgedrückt als Bruch in den niedrigsten Begriffen. 1920 ÷ 1080 = 1,777…, und der Bruchteil 1920/1080 reduziert sich auf 16/9. Beiden ist die gleiche Tatsache auf zwei Arten angegeben: Die Dezimalform ist leichter zu vergleichen (ist 1,78 breiter als 1,5? offensichtlich), und die Darmform ist einfacher zu sagen.
Die drei Berechnungen, die Sie tatsächlich benötigen
Lösung nach einer fehlenden Dimension
Sie kennen die Form und eine Seite. Dies ist der häufigste Fall in der Praxis: "Ich brauche ein 16: 9-Bild und mein Behälter ist 1280 Pixel breit - wie groß?"
height = width × (ratioHeight ÷ ratioWidth)
= 1280 × (9 ÷ 16)
= 720
Und in die andere Richtung:
width = height × (ratioWidth ÷ ratioHeight)
= 1080 × (16 ÷ 9)
= 1920
Wählen Sie im Rechner eine Voreinstellung oder geben Sie Ihr Verhältnis ein, geben Sie die Dimension ein, die Sie kennen, lassen Sie das andere leer und klicken Sie auf "Berechnen". Es füllt das leere Feld aus und zeigt die darunter liegende Arithmetik.
Reduzieren einer Größe auf ihr Verhältnis
Sie haben eine Größe und möchten ihre Form kennen - normalerweise, um zu überprüfen, ob zwei Assets übereinstimmen, oder um herauszufinden, was der geheimnisvolle Export eines Kunden tatsächlich ist.
Die Methode ist der größte gemeinsame Teiler. Finden Sie die größte Zahl, die beide Dimensionen gleichmäßig teilt, und teilen Sie beide durch sie. Für 1920 und 1080 ist diese Zahl 120: 1920 ÷ 120 = 16, 1080 ÷ 120 = 9. Verhältnis 16:9.
Hier werden die Antworten interessant, da die Größen in der realen Welt oft nicht auf ein marketingfreundliches Verhältnis reduzieren. Ein ultrabreiter Monitor mit 3440 × 1440 reduziert sich auf 43:18. Ein 2560 × 1080 reduziert sich auf 64:27. Beide werden als "21:9" verkauft, und es ist keiner der Fall - 21: 9 wäre 3360 × 1440. Die Bezeichnung ist eine Rundung der Dezimalzahl (≈2,39:1 und ≈2.37:1) in etwas, das neben 16:9 ordentlich klingt. Der Rechner gibt Ihnen das wahre reduzierte Verhältnis und die Dezimalzahl, sodass Sie die Realität eher aus der Realität als aus einem Datenblatt heraus dimensionieren können.
Skalierung und Anpassung
Zwei Varianten derselben Idee. Schuppung Multipliziert beide Dimensionen mit demselben Faktor, der per Definition das Verhältnis beibehält - eine 50%-Skala von 1920 × 1080 beträgt 960 × 540, immer noch 16: 9. passend Verkleinert eine Quellgröße, bis sie sich in einem Begrenzungsrahmen befindet, ohne Verzerrung: Nehmen Sie die kleinere boxWidth ÷ sourceWidth und boxHeight ÷ sourceHeight und skalieren Sie damit. Ein 4000 × 3000-Foto in eine 1200 × 1200-Box wird 1200 × 900. Genau das ist CSS object-fit: contain tut und genau das, was ein Image-CDN tut, wenn Sie nach einer Größenänderung der maximalen Dimension fragen.
Hauptmerkmale des Seitenverhältnis-Rechners
Zehn Presets, mit der tatsächlichen Verwendung beschriftet
16:9 für Standardvideos und die meisten Displays. 9:16 für Rollen, Shorts, TikTok und Geschichten. 1: 1 für quadratische soziale Posten und Avatare. 4:3 für ältere Displays und iPad. 3:2 für DSLR-Fotografie und 35mm Film. 2:3 für Porträtdrucke. 5:4 für 8×10 Drucke. 21:9 für ultrabreite 1,91:1 Für OpenGraph Link-Vorschau-Bilder 2.39:1 Für anamorphotische Breitbild. Das Schweben eines Presets sagt Ihnen, wofür es ist, was wichtiger ist als die Zahl, wenn Sie versuchen, sich daran zu erinnern, welche Instagram es möchte.
Die Formel unter jeder Antwort
Das Ergebnis-Panel zeigt die genaue Arithmetik — 1280 × (9 ÷ 16) = 720drohen Teilweise, damit Sie es überprüfen können, teilweise, um es in eine Tabelle oder ein Skript zu heben. Wenn Sie eine Dimension in eine CSS-Datei oder eine Tailwind-Konfiguration fest codieren möchten, sollten Sie sehen, woher die Nummer stammt.
Das reduzierte Verhältnis, die Dezimalzahl und der Name
Jedes Ergebnis meldet alle drei Darstellungen: das reduzierte Integerverhältnis (16:9), seine Dezimalform (1,778:1) und einen gemeinsamen Namen, wenn es einen hat. Dezimal ist das, womit Sie vergleichen, der Name ist das, was Sie in einen Designbrief eingeben.
Megapixel und Gesamtzahl der Pixel
Jedes Ergebnis beinhaltet die Pixelanzahl in Megapixeln. Dies ist die Zahl, die tatsächlich die Speichernutzung und die Dateigröße vorhersagt, wenn Sie die Größe von Bildern ändern. Ein 4000 × 3000-Foto hat eine 12-MP-Datei und eine Verdoppelung seiner Abmessungen vervierfacht sich auf 48 MP, verdoppelt es nicht. Wenn Sie reaktionsschnelle Bildsätze erstellen, ist diese quadratische Beziehung das Richtige für Sie. Wenn Sie mit der Größe fertig sind, Bildgröße ändern und Bildkompresse Machen Sie die eigentliche Arbeit im Browser.
Eine Live-Form-Vorschau
Ein Rechteck im Ergebnisfeld, das auf das gerade berechnete Verhältnis gezeichnet wird. Es klingt dekorativ und es ist nicht der schnellste Weg, um zu fangen, dass Sie 9:16 getippt haben, als Sie gemeint haben, dass 16: 9 eine hohe Box anschaut, wenn Sie eine breite erwartet haben.
Client-Seite, offline, keine Anmeldung
Einfache JavaScript-Arithmetik in Ihrem Browser. Nichts wird irgendwohin gesendet, nichts wird protokolliert und die Seite funktioniert mit dem Netzwerk.
Welches Seitenverhältnis soll ich verwenden?
| Verhältnis | dezimal | wo es verwendet wird | Typische Pixelgröße |
|---|---|---|---|
| 16: 9 | 1.778 | YouTube, HD/4K-Video, die meisten Monitore, Fernseher | 1920 × 1080, 3840 × 2160 |
| 9:16 | 0,563 | Instagram-Reels, TikTok, YouTube-Shorts, Geschichten | 1080 × 1920 |
| 1: 1 | 1.0 | Instagram-Feed-Beiträge, Avatare, Produkt-Mumbernails | 1080 × 1080 |
| 4: 5 | 0.8 | Instagram Portrait Feed Post (größter Feed Footprint) | 1080 × 1350 |
| 1.91: 1 | 1,91 | OpenGraph / Twitter-Karten-Link-Vorschau | 1200 × 630 |
| 4: 3 | 1.333 | iPad, ältere Monitore, viele Kamerasensoren | 2048 × 1536 |
| 3:2 | 1.5 | DSLR- und spiegellose Stills, 35mm Film, Fotodrucke | 6000 × 4000 |
| 21: 9 (wirklich ~2,37–2,39: 1) | ~ 2.38 | Ultrawide Monitore, filmische Pflanzen | 3440 × 1440 |
| 2.39:1 | 2,39 | Anamorphes Breitbild-Kino | 4096 × 1716 |
Zwei praktische Hinweise. Die Größe von 1200 × 630 OpenGraph reduziert sich auf 40:21, eine Dezimalzahl von 1,905 - nah genug auf 1,91: 1, die jeder so nennt, und es ist die Größe Facebook, LinkedIn und X, die alle sauber gerendert werden. Überprüfen Sie das Ergebnis mit dem Graph-Vorschau öffnen Tool, bevor Sie es versenden, da ein schlecht beschnittenes Vorschaubild der sichtbarste Fehler auf einem Link ist, auf den niemand klickt. Und 4:5 ist für Instagram speziell zu wissen: Es nimmt mehr vertikalen Platz im Feed ein als 1:1, was freie Aufmerksamkeit ist.
Häufige Anwendungsfälle
Responsive Bilder ohne Verzerrung skalieren
Sie erstellen ein Kartenraster und das Design erfordert 16:9-Miniaturansichten bei einer Containerbreite von 384 Pixel. Berechnen Sie: 384 × 9 ÷ 16 = 216. Jetzt haben Sie eine konkrete Größe für Ihr CSS aspect-ratio: 16 / 9 Erklärung und Ihr Bildexport, und sie stimmen miteinander überein. Das moderne CSS macht dies einfacher als früher — aspect-ratio In CSS nimmt das Verhältnis direkt und lässt den Browser die Arithmetik ausführen - Sie benötigen jedoch noch die Pixeldimensionen für das Asset selbst.
Exportieren von Videos für eine bestimmte Plattform
Sie haben 16: 9 geschossen und brauchen einen vertikalen Schnitt von 9:16. Die Höhe bleibt bei 1920, also beträgt die Breite 1920 × 9 ÷ 16 = 1080. Das ist Ihre Exportgröße - und der Grund, warum die Zahlen bekannt sind, ist, dass 1080 × 1920 einfach 1920 × 1080 mit den vertauschten Achsen ist, was "Vertikales Video" bedeutet.
Eine Sache, die der Rechner nicht für Sie tun wird: H.264 erfordert gleichmäßige Abmessungen. Wenn Ihre Mathematik auf einer ungeraden Zahl landet, runden Sie die ungerade Seite um ein Pixel, oder Ihr Encoder lehnt den Job ab.
Herauszuarbeiten, was ein mysteriöser Vermögenswert tatsächlich ist
Ein Kunde sendet Assets bei 1440 × 1800 und fragt, warum er auf der Homepage schlecht abschneidet. Reduzieren Sie es: GCD von 1440 und 1800 ist 360, was 4: 5 ergibt. Ihre Homepage-Slots sind 16:9. Diese beiden Formen können nicht beide ohne Zuschnitt erfüllt werden - jetzt haben Sie eine konkrete Antwort und eine Entscheidung zu treffen, anstatt ein vages Gefühl, dass etwas nicht stimmt.
Überprüfen, ob ein Satz von Vermögenswerten konsistent ist
Führen Sie vor einem Start jedes Heldenbild durch den Ratio-Modus. Wenn einer von dreißig als 1,6: 1 zurückkommt, während der Rest 1,778: 1 ist, haben Sie das Asset gefunden, das auf der Live-Site subtil falsch aussieht, und Sie haben es gefunden, bevor ein Benutzer dies tut.
Wissenswertes technisches
Rundung. Die meisten Verhältnisberechnungen landen nicht auf ganzen Pixeln. 16:9 bei einer Breite von 1000 ergibt eine Höhe von 562,5. Der Rechner rundet das nächste ganze Pixel ab, sodass Sie 563 erhalten - eine Form von 1,7762: 1 statt 1,7778: 1, eine Differenz von etwa einem Zehntel Prozent und unsichtbar. Verfolge es nicht. Beachten Sie, dass das konsequent rund ist hin Über einen Bildsatz kann sich eine sichtbare Drift ansammeln, wenn Sie Elemente stapeln; rund um die Quelldimension und nicht aus dem vorherigen Ergebnis.
Pixel-Seitenverhältnis vs. Display-Seitenverhältnis. In Broadcast-Videos können diese unterschiedlich sein: Altes DV-Material gespeichert 720 × 480 Pixel, aber als 4:3 angezeigt, indem jeder Pixel nicht quadratisch gemacht wird. Fast nichts, was Sie heute berühren, tut dies - alles sind quadratische Pixel - aber wenn Sie mit Altmaterial arbeiten und die Mathematik sich nicht summieren will, ist dies der Grund.
aspect-ratio In CSS. Seit 2021 können Sie schreiben aspect-ratio: 16 / 9 Und lassen Sie den Browser die Form halten, während eine Dimension flüssig ist. Benutze es. Es entfernt eine ganze Klasse der früher notwendigen Padding-Hacks und bedeutet, dass Ihr Layout bei Breiten, die Sie noch nie getestet haben, korrekt bleibt. Sie möchten weiterhin den Rechner für den Asset-Export, da die Bilddatei eine reale Anzahl von Pixeln sein muss.
Zuschneiden ist nicht skalieren. Wenn sich ein Quell- und Zielverhältnis unterscheidet, können Sie die Größe zwischen ihnen nicht ändern - Sie müssen beschneiden, Briefkasten oder Verzerrungen. Wählen Sie absichtlich. object-fit: cover Zuschnitt (und ist normalerweise das, was Sie für Fotos wollen), contain Briefkästen (normalerweise das, was Sie für Logos wollen) und fill Verzerrt (fast nie das, was Sie wollen, und die Ursache für meine verstümmelten Gesichter oben in diesem Artikel).
FAQ
Wie berechne ich das Seitenverhältnis aus Breite und Höhe?
Teilen Sie beide Zahlen durch ihren größten gemeinsamen Teiler. Für 1920 × 1080 beträgt die GCD 120, das Verhältnis reduziert sich also auf 16:9. Schalten Sie diesen Rechner um, um den Verhältnismodus zu erhalten, geben Sie beide Dimensionen ein und er führt die Reduktion aus und benennt das Verhältnis für Sie.
Welche Höhe benötige ich für ein 16:9-Bild mit einer Breite von 1280 Pixeln?
Multiplizieren Sie die Breite mit 9 und dividieren Sie durch 16: 1280 × 9 ÷ 16 = 720. Ein Bild von 16:9 1280 Pixel ist also 720 Pixel groß. Geben Sie die 16:9-Voreinstellung und eine Breite von 1280 ein, um es zu bestätigen.
Was ist der Unterschied zwischen Seitenverhältnis und Auflösung?
Das Seitenverhältnis ist die Form - das Verhältnis von Breite zu Höhe. Auflösung ist die tatsächliche Pixelanzahl. 1280 × 720 und 1920 × 1080 sind unterschiedliche Auflösungen mit dem gleichen Seitenverhältnis von 16:9, weshalb man ohne Verzerrung oder Beschneiden auf das andere skaliert.
Welches Seitenverhältnis sollte ich für Social Media verwenden?
Verwenden Sie 1:1 oder 4:5 für Instagram-Feed-Posts, 9:16 für Reels, Stories, TikTok und YouTube-Shorts, 16:9 für Standard-Youtube-Videos und 1,91:1 für Open Graph-Link-Vorschaubilder auf Facebook, LinkedIn und X. Alle diese Voreinstellungen in diesem Tool enthalten alle diese.
Warum sieht mein verkleinertes Bild gedehnt aus?
Die neue Breite und Höhe entsprechen nicht dem ursprünglichen Verhältnis, sodass das Bild entlang einer Achse gequetscht wird. Berechnen Sie die Zielhöhe aus Ihrer Zielbreite mit dem ursprünglichen Verhältnis, anstatt beide Zahlen von Hand einzugeben - genau das ist der Modus "Lösung-für-Missing-Side".
Was bedeutet 21:9 eigentlich?
Es ist ein Marketinglabel für Ultrawide-Displays. Das wahre Verhältnis eines 3440 × 1440-Monitors beträgt 43:18, ungefähr 2,39:1, und ein 2560 × 1080-Panel beträgt 64:27. Beide werden in Produktlisten auf "21:9" gerundet. Wenn Sie genaue Pixelabmessungen benötigen, berechnen Sie aus der realen Panelauflösung und nicht aus dem Etikett.
Wie halte ich ein Seitenverhältnis, wenn das Ergebnis keine ganze Zahl ist?
Der Rechner rundet das nächste ganze Pixel ab, was höchstens einen halben Pixel Drift einführt – in der Praxis unsichtbar. Video-Encoder sind strenger: H.264 erfordert gerade Abmessungen, also runden Sie die ungerade Seite um einen Pixel, wenn ein Encoder Ihre Größe ablehnen.
Funktioniert dieser Rechner offline?
Ja. Jede Berechnung ist in Ihrem Browser einfach Javascript-Arithmetik ausgeführt. Es werden keine Dimensionen an einen Server gesendet, nichts wird protokolliert, und das Tool funktioniert nach dem Laden der Seite weiterhin ohne Internetverbindung.
Verwandte Tools
- Bildgröße ändern — Wenden Sie die gerade berechneten Abmessungen im Browser an
- Bildkompresse — Verkleinern Sie die Datei, sobald die Form richtig ist
- Prozentualer Rechner — für die skalierte Hälfte des Jobs
- Graph-Vorschau öffnen — Überprüfen Sie das 1.91:1-Bild, bevor Sie den Link versenden
- Formatkonverter — WebP und AVIF für die Assets, die Sie gerade dimensioniert haben
Weiterlesen: Die vollständige Anleitung zur Bildkomprimierung und Wichtige Bildwerkzeuge für das Webdrohen
