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%. Auf einem 375-Pixel-Telefon, das ein Verhältnis von etwa 1,56:1 erzeugte, und die Bilder waren 16:9 - 1,78:1. 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ößenbestimmung von Bildern für ein Plugin' s Admin-Bildschirme, Export von Videos im Reels-Format, Herausarbeiten, 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). Um das Verhältnis aus einer Größe zu erhalten, dividieren Sie beide Zahlen durch ihren größten gemeinsamen Teiler - 1920 und 1080 teilen sich einen GCD von 120, was 16:9 ergibt. Die 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 einem Bild' s Breite und seiner Höhe Es wird als zwei Zahlen geschrieben, die durch einen Doppelpunkt getrennt sind - 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 in drei Größen, weshalb jeder von ihnen ohne Verzerrung oder Zuschneiden in jede andere skaliert Inzwischen 1920 × 1080 und 1920 × 1200 haben fast die gleiche Breite, unterscheiden sich um 120 Pixel Höhe, und sind grundlegend verschiedene Formen - eine ist 16:9, die andere ist 16:10, und setzen Inhalte für einen Behälter für einen Buchstaben gebaut bedeutet einen Buchstaben.
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 Das ist der häufigste Fall in der Praxis: " ich brauche ein 16:9 Bild und mein Container ist 1280 Pixel breit - wie hoch?"
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 deren Form kennen - normalerweise um zu überprüfen, ob zwei Assets übereinstimmen, oder um herauszufinden, was ein Client's-Export mit Mystery-Dimension 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 Ultrawide-Monitor 3440 1440 reduziert sich auf 43:18. Ein 2560 1080 one reduziert sich auf 64:27. Beide werden als "21:9" verkauft, und das ist auch nicht wirklich - 21:9 wäre 3360 1440. Das Etikett ist eine Runde der Dezimalzahl (2.39:1 und 22.37:1) in etwas, das neben 16:9 Tidy klingt Der Rechner gibt Ihnen die wahre Größe und das Dezimalverhältnis.
Skalierung und Anpassung
Zwei Varianten derselben Idee. Schuppung Multipliziert beide Dimensionen mit demselben Faktor, wodurch per Definition das Verhältnis erhalten bleibt - eine 50% Skala von 1920 × 1080 ist 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 Ergebnispanel zeigt die exakte 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 Dateigröße vorhersagt, wenn Sie die Größe von Bildern ändern - ein 4000 × 3000-Foto ist 12 MP, und die Verdoppelung seiner Abmessungen vervierfacht diese auf 48 MP und verdoppelt sie nicht. Wenn Sie reaktionsfähige Bildsätze generieren, ist diese quadratische Beziehung das Richtige für Sie im Kopf. Wenn Sie mit der Größenbestimmung fertig sind, Bildgröße ändern und Bildkompresse Machen Sie die eigentliche Arbeit im Browser.
Eine Live-Form-Vorschau
Ein Rechteck im Ergebnisfeld, gezeichnet nach dem gerade berechneten Verhältnis Es klingt dekorativ und ist es nicht - der schnellste Weg, das Sie 9:16 getippt haben, als Sie 16:9 meinten, besteht darin, auf eine hohe Box zu schauen, als 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 1200 × 630 OpenGraph reduziert sich auf 40:21, eine Dezimalzahl von 1,905 - nahe genug an 1,91:1, dass jeder es so nennt, und es ist die Größe Facebook, LinkedIn, und X alle sauber rendern Ü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 Deklaration und Ihren Bildexport, und sie stimmen miteinander überein Modernes CSS macht das einfacher als früher - aspect-ratio In CSS nimmt man das Verhältnis direkt und lässt den Browser rechnen - aber man braucht noch die Pixelmaße für das Asset selbst.
Exportieren von Videos für eine bestimmte Plattform
Man hat 199 geschossen und braucht einen vertikalen Schnitt 1:16. Die Höhe bleibt bei 1920, also die Breite ist 1920 × 9:616 = 1080. Das ist Ihre Exportgröße - und der Grund, warum die Zahlen bekannt vorkommen, ist, dass 1080 × 1920 einfach 1920 × 1080 mit vertauschten Achsen ist, was "vertical 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 Client schickt Assets unter 1440 × 1800 und fragt, warum sie auf der Homepage schlecht schneiden 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 Zuschneiden befriedigt 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 auf das nächste ganze Pixel, so dass man 563 erhält - eine Form, die 1,7762:1 statt 1,7778:1 ist, ein Unterschied von etwa einem Zehntel Prozent, und unsichtbar. Verfolge sie nicht Beachten Sie das durchgängig Rundungen 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. Im Broadcast-Video können diese abweichen: altes DV-Material speicherte 720 × 480 Pixel, zeigte sie aber als 4:3 an, indem jedes Pixel nicht quadratisch gemacht wurde Fast nichts, was Sie heute berühren, tut dies - alles ist quadratische Pixel - aber wenn Sie mit Legacy-Material arbeiten und die Mathematik sich weigert, sich zusammenzufassen, deshalb.
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 unterscheiden, können Sie die Größe zwischen ihnen nicht ändern - Sie müssen zuschneiden, Letterboxen oder verzerren Wählen Sie bewusst. 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?
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 gleichem Seitenverhältnis 16:9, weshalb das eine ohne Verzerrung oder Zuschneiden zum anderen skaliert.
Welches Seitenverhältnis sollte ich für Social Media verwenden?
Verwenden Sie 1:1 oder 4:5 für Instagram-Feed-Beiträge, 9:16 für Walzen, Geschichten, TikTok und YouTube-Shorts, 16:9 für Standard-YouTube-Videos und 1,91:1 für Grafik öffnen Link-Vorschaubilder auf Facebook, LinkedIn und X. Die Voreinstellungen in diesem Tool umfassen alle diese.
Warum sieht mein verkleinertes Bild gedehnt aus?
Die neue Breite und Höhe stimmen nicht mit dem ursprünglichen Verhältnis überein, so dass 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 dafür ist der Lösemodus für die fehlende Seite da.
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 auf das nächste ganze Pixel, was höchstens ein halbes Pixel Drift einführt - in der Praxis unsichtbar Video-Encoder sind strenger: H.264 benötigt gerade Abmessungen, also rundet die ungerade Seite um ein Pixel nach unten, wenn ein Encoder eure Größe ablehnt.
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- die gerade berechneten Maße anwenden, im Browser
- Bildkompresse- verkleinern Sie die Datei, sobald die Form stimmt
- Prozentualer Rechner- für die prozentuale Hälfte des Jobs
- Graph-Vorschau öffnen- überprüfen Sie das Bild um 1.91:1, bevor Sie den Link versenden
- Formatkonverter- WebP und AVIF für die Vermögenswerte, die Sie gerade bewertet haben
Weiterlesen: Die vollständige Anleitung zur Bildkomprimierung und Wichtige Bildwerkzeuge für das Webdrohen
