Was ist ein Seitenverhältnis?

Ein Seitenverhältnis ist das proportionale Verhältnis zwischen Breite und Höhe eines Elements, ausgedrückt als zwei durch Doppelpunkt getrennte Zahlen (z.B. 16:9 oder 4:3). Es beschreibt die Form eines Rechtecks.

Wie wird das Seitenverhältnis berechnet?

Das Seitenverhältnis wird berechnet, indem beide Dimensionen durch ihren größten gemeinsamen Teiler (ggT) dividiert werden. Für 1920×1080: ggT(1920, 1080) = 120, also 1920÷120 = 16 und 1080÷120 = 9, ergibt 16:9.

Welches sind die häufigsten Seitenverhältnisse?

16:9 ist der Standard für Breitbild-Video und die meisten modernen Monitore. 4:3 war der Standard für ältere TVs. 1:1 ist quadratisch, beliebt auf Instagram. 21:9 ist ultrabreit und kinematografisch. 9:16 ist Hochformat für vertikale Videos und Stories.

Was ist die CSS aspect-ratio Eigenschaft?

Die CSS-Eigenschaft `aspect-ratio` legt ein bevorzugtes Seitenverhältnis für ein Element fest. Beispiel: `aspect-ratio: 16 / 9` hält 16:9-Proportionen. Sie eliminiert den alten "padding-top-Hack" für responsive Einbettungen. Unterstützt in allen modernen Browsern seit 2021.

Wie behalte ich das Seitenverhältnis beim Skalieren von CSS-Bildern?

Verwenden Sie `object-fit: cover` oder `object-fit: contain` auf -Elementen in einem Container mit fester Größe. Alternativ `aspect-ratio: 16/9; width: 100%;` direkt auf dem Bild oder Container.

Welches Seitenverhältnis für Social Media?

Gängige Social-Media-Verhältnisse: Instagram-Feed = 1:1 oder 4:5. Stories/Reels = 9:16. YouTube = 16:9. Twitter = 16:9. Facebook = 1.91:1. Pinterest = 2:3. Im Zweifelsfall funktioniert 16:9 für die meisten Plattformen.

Unterschied zwischen Seitenverhältnis und Auflösung?

Auflösung bezieht sich auf die tatsächlichen Pixelmaße (z.B. 1920×1080). Seitenverhältnis ist das proportionale Verhältnis, unabhängig von der Größe. Mehrere Auflösungen können dasselbe Verhältnis haben: 1280×720, 1920×1080 und 3840×2160 haben alle 16:9.

Aspect Ratio

Seitenverhältnisse für Bilder, Videos und Bildschirme berechnen.

Automatische BerechnungHäufige PresetsVerhältnis sperren

① Breite und Höhe eingeben ② Oder Preset auswählen ③ CSS kopieren

Standard

Social

Benutzerdefiniertes Verhältnis:

Breite (px)

Höhe (px)

16:9

Seitenverhältnis

16:9

Abmessungen

1920×1080

Dezimalverhältnis

1.7778

CSS-Ausgabe

aspect-ratio: 16 / 9;
padding-top: 56.2500%; /* legacy fallback */
width: 1920px;
height: 1080px;

Weiter mit

▸Px zu RemCSS-Einheiten konvertieren 64Base64 ToolKodieren & dekodieren ↓SVG zu PNGVektordateien konvertieren

Was ist das Seitenverhältnis und warum ist es wichtig?

Das Seitenverhältnis ist das proportionale Verhältnis zwischen Breite und Höhe eines Elements, ausgedrückt als B:H — zum Beispiel 16:9, 4:3, 1:1 oder 9:16. Es ist grundlegend für Videoproduktion, Fotografie und Responsive Web Design. Modernes CSS setzt Verhältnisse mit der aspect-ratio-Eigenschaft um (z.B. aspect-ratio: 16 / 9), was den alten padding-top-Trick (padding-top: 56.25%) ersetzt. Häufige Anwendungsfälle: YouTube-Thumbnails (1280×720, 16:9), Instagram-Posts (1080×1080, 1:1), TikTok und Stories (1080×1920, 9:16), Open Graph-Bilder (1200×630), LinkedIn-Banner (1200×627).

Häufig gestellte Fragen

Das Seitenverhältnis ist das proportionale Verhältnis zwischen Breite und Höhe, ausgedrückt als B:H. Häufige Verhältnisse: 16:9 (Widescreen), 4:3, 1:1, 21:9, 9:16.

Höhe aus Breite: Höhe = Breite × (Verhältnis-Höhe ÷ Verhältnis-Breite). Beispiel: 16:9 bei 1920px → 1080px.

16:9 ist der Standard für Widescreen-Video, moderne Monitore und YouTube-Thumbnails.

Modernes CSS: `aspect-ratio: 16 / 9`. Für ältere Browser: `padding-top: 56.25%`.

Seitenverhältnis ist dimensionslos (z.B. 16:9). Auflösung ist die tatsächliche Pixelanzahl (1920×1080).

In HTML5 width und height auf <img> setzen. max-width: 100%; height: auto in CSS.

Instagram-Post: 1:1. Story/TikTok: 9:16. Twitter: 3:1. YouTube: 16:9 (1280×720). Open Graph: 1200×630.

Was ist das Seitenverhältnis und warum ist es wichtig?

Häufig gestellte Fragen

Unser Netzwerk entdecken