📐 Ein Toolkit,
jede Designaufgabe

Seitenverhältnis-Rechner

Berechne und skaliere jedes Seitenverhältnis — 16:9, 4:3, 1:1, 9:16 und benutzerdefiniert. Ändere die Abmessungen unter Beibehaltung der Proportionen, mit gängigen Auflösungsvoreinstellungen.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

📐 Seitenverhältnis-Rechner

Leitfaden zum Seitenverhältnis

Ein Seitenverhältnis beschreibt das proportionale Verhältnis zwischen Breite und Höhe. Es wird als zwei durch einen Doppelpunkt getrennte Zahlen geschrieben – 16:9 bedeutet, dass die Breite 16 Einheiten pro 9 Einheiten Höhe beträgt. Das richtige Verhältnis verhindert gestreckte Bilder und fehlerhafte Layouts.

Geben Sie Ihre Breite und Höhe ein oder wählen Sie eine Voreinstellung aus. Wenn die Verhältnissperre aktiviert ist, wird beim Ändern einer Bemaßung automatisch die andere skaliert, um die Proportionen beizubehalten. Die Vorschau stellt Ihr Verhältnis zum Maßstab dar und gängige Auflösungen bieten Ihnen sofortige Ausgangspunkte für Video, Web und Druck.

Pro Tips

Frequently Asked Questions

Q: Was sind die häufigsten Seitenverhältnisse?
Was sind die häufigsten Seitenverhältnisse? 16:9 für Videos und Bildschirme, 4:3 für ältere Fernseher und Präsentationen, 1:1 für Social-Media-Beiträge, 9:16 für vertikale Videos und 3:2 für Fotografie.
Q: Wie berechne ich ein Seitenverhältnis aus Abmessungen?
Wie berechne ich ein Seitenverhältnis aus Abmessungen? Teilen Sie beide Zahlen durch ihren größten gemeinsamen Teiler. Für 1920 x 1080 dividiert man beides durch 120, was 16:9 ergibt.
Q: Welches Seitenverhältnis sollte ich für YouTube verwenden?
Welches Seitenverhältnis sollte ich für YouTube verwenden? 16:9 ist der Standard. Für Shorts und vertikale Videos im TikTok-Stil verwenden Sie 9:16.
Q: Kann ich das Seitenverhältnis in CSS verwenden?
Kann ich das Seitenverhältnis in CSS verwenden? Ja, die Eigenschaft „Seitenverhältnis“ wird seit 2021 in allen modernen Browsern unterstützt. Sie ersetzt den alten Padding-Top-Hack.
Q: Warum sehen meine Bilder gestreckt aus?
Warum sehen meine Bilder gestreckt aus? Die Containergröße stimmt nicht mit dem Bildverhältnis überein. Schneiden Sie das Bild entweder auf das Containerverhältnis zu oder verwenden Sie object-fit:cover, um es ohne Verzerrung zu füllen.

Bauhaus-Farben

Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.

Bauhaus Rot #BE1E2D

Das ikonische Rot der Bauhaus-Plakate und Drucksachen

Bauhaus Gelb #FFDE17

Das leuchtende Gelb der Bauhaus-Ästhetik

Bauhaus Blau #00509E

Das tiefe Blau des Bauhaus-Farbkreises

Ultramarin #120A8F

Historisches Pigment aus Lapislazuli, von Goethe beschrieben

Ocker #C78B2C

Erdpigment der deutschen Renaissance-Malerei

Petrol #006D7C

Das Blaugrün der Nachkriegszeit und des Mid-Century-Designs

Lindgrün #7CBA3D

Das frische Grün der Frühlingslinden

Ziegelrot #B22222

Die roten Ziegeldächer der Altstädte

Graphit #38383A

Der dunkle Grauton der Zeichenkunst und des Industriedesigns

Weiß #F4F4F4

Das Weiß der Bauhaus-Wände — Raum und Licht

Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.