Seitenverhaeltnis-Rechner: Verstehen von Breiten-Hoehen-Verhaeltnissen

Meistere Seitenverhaeltnisse fuer Video, Bilder und responsives Design. Berechne Abmessungen praezise fuer jeden Bildschirm.

5 Min. Lesezeit Konvertierung · CSS · Video 6 Abschnitte + FAQ

Das Seitenverhaeltnis ist die proportionale Beziehung zwischen Breite und Hoehe. 16:9 ist die universelle Sprache moderner Bildschirme.

Das Verstehen von Seitenverhaeltnissen verhindert die haeufigsten Layout-Fehler: verzerrte Bilder, Letterbox-Video und kaputte responsive Container.

Was ist das Seitenverhaeltnis

Ein Seitenverhaeltnis drueckt die proportionale Beziehung zwischen Breite und Hoehe als zwei durch einen Doppelpunkt getrennte Ganzzahlen aus.

Kostenloses Tool Seitenverhältnis-Rechner Berechne Abmessungen und konvertiere zwischen Seitenverhältnissen

Haeufige Verhaeltnisse (16:9, 4:3, 9:16, 1:1, 21:9)

16:9 (Widescreen) ist der Standard fuer HD-Video und YouTube. 4:3 ist der alte Fernsehstandard. 9:16 ist das Hochformat fuer Mobile. 1:1 ist quadratisch. 21:9 fuer Kino.

Abmessungen berechnen

Um die Hoehe aus Breite und Verhaeltnis zu berechnen: Hoehe = Breite mal (Verhaeltnis_Hoehe / Verhaeltnis_Breite). Fuer 16:9 bei 1280px Breite: Hoehe = 1280 mal (9/16) = 720px.

Kostenloses Tool CSS-Einheiten-Konverter Konvertiere zwischen px, rem, em, vh, vw und mehr

CSS aspect-ratio Eigenschaft

Die CSS aspect-ratio Eigenschaft erzwingt proportionale Groessenaenderung: aspect-ratio: 16 / 9 laesst ein Element das 16:9-Verhaeltnis beibehalten.

Responsive Bilder und Videos

Fuer responsive Video-Embeds wrappst du das iframe in einen Container mit aspect-ratio: 16/9.

Social-Media-Formate

Jede Plattform hat bevorzugte Verhaeltnisse: Facebook-Feed 1.91:1, Instagram-Feed 4:5 oder 1:1, Instagram Story 9:16, YouTube-Thumbnail 16:9.

Kostenloses Tool PX zu REM Konverter Konvertiere Pixelwerte in rem-Einheiten für responsives Design

Haeufig gestellte Fragen

Was ist das haeufigste Seitenverhaeltnis fuer Videos? +
16:9 ist der Standard fuer moderne HD- und 4K-Videos, verwendet von YouTube, Netflix und den meisten Streaming-Plattformen.
Wie berechne ich die Hoehe aus Breite und Seitenverhaeltnis? +
Teile die zweite Verhaeltniszahl durch die erste, dann multipliziere mit der Breite. Fuer 16:9 bei 1920px: 9/16 mal 1920 = 1080px.
Was ist die CSS aspect-ratio Eigenschaft? +
Die CSS aspect-ratio Eigenschaft legt ein bevorzugtes Seitenverhaeltnis fuer ein Element fest.
Welches Seitenverhaeltnis ist am besten fuer Instagram? +
Fuer Feed-Posts ist 4:5 (Hochformat) empfohlen. Fuer Stories und Reels verwende 9:16.
Was ist der Unterschied zwischen 16:9 und 16:10? +
16:10 ist etwas hoeher als 16:9. Es war in den fruehen 2000er Jahren bei Laptops verbreitet.
Wie behalte ich das Seitenverhaeltnis in responsivem CSS ohne die aspect-ratio Eigenschaft? +
Verwende den padding-top-Prozent-Hack: Setze position: relative auf den Container.
Warum verwenden einige Monitore 21:9? +
21:9 (Ultrawide) bietet ein breiteres Sichtfeld, das fuer Gaming, Videobearbeitung und Multitasking vorteilhaft ist.