Seitenverhältnis-Rechner

So nutzen Sie den Seitenverhältnis-Rechner

1. Wählen Sie eines der Gängige Formate (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) oder tragen Sie eigene Werte unter Verhältnis oder Originalgröße ein. Sie können ein Verhältnis (16 und 9) oder die echten Maße eines Bildes, Videos oder Bildschirms (1920 und 1080) eingeben.
2. Lesen Sie die Ergebnisse ab: das Gekürztes Verhältnis, das Verhältnis als Dezimalzahl (Breite geteilt durch Höhe), die Ausrichtung und das Nächstes Standardformat. Ein „≈“ bedeutet, dass Ihre Größe nahe an diesem Standard liegt, ihm aber nicht genau entspricht.
3. Geben Sie unter Neue Größe (Verhältnis bleibt erhalten) eine Neue Breite ein, um die passende Höhe zu erhalten, oder eine Neue Höhe, um die Breite zu berechnen. Die Zeile darunter zeigt den Rechenweg. Deaktivieren Sie Auf ganze Pixel runden, wenn Sie den exakten Wert brauchen, etwa für Druckmaße in Millimetern.
4. Breite und Höhe tauschen macht aus einem Querformat ein Hochformat (aus 16:9 wird 9:16) und umgekehrt.
5. Die Vorschau zeichnet einen Rahmen in Ihrem Verhältnis, und die Tabelle listet die Größe jedes gängigen Formats bei Ihrer neuen Breite auf.
6. Übernehmen Sie den CSS-Code mit Kopieren.

So funktioniert die Berechnung

Ein Seitenverhältnis ist die Breite geteilt durch die Höhe, geschrieben als zwei ganze Zahlen. Zum Kürzen teilt dieses Tool beide Seiten durch ihren größten gemeinsamen Teiler (ggT): Der ggT von 1920 und 1080 ist 120, also gilt 1920:1080 = 16:9. Dezimalwerte werden vorher mit einer Zehnerpotenz multipliziert (aus 2,39:1 wird 239:100).

Das proportionale Skalieren ist ein klassischer Dreisatz:

• neue Höhe = neue Breite × Originalhöhe ÷ Originalbreite
• neue Breite = neue Höhe × Originalbreite ÷ Originalhöhe

Beispiel: Ein 16:9-Video mit 1280 px Breite ist 1280 × 9 ÷ 16 = 720 px hoch.

Manche Bildschirme haben „krumme“ Verhältnisse. Ein Laptop mit 1366 × 768 Pixeln ergibt gekürzt 683:384, also 1,779:1 – nur einen Hauch von 16:9 (1,778:1) entfernt, daher „≈ 16:9“. Monitore, die als 21:9 verkauft werden, haben in Wirklichkeit 64:27 (2560 × 1080) oder 43:18 (3440 × 1440). Deshalb stehen beide in der Tabelle.

Die CSS-Eigenschaft aspect-ratio

aspect-ratio: 16 / 9; lässt den Browser die fehlende Abmessung selbst berechnen: Mit width: 100% ergibt sich die Höhe automatisch, und das Element skaliert mit seinem Container. Die Eigenschaft funktioniert in allen aktuellen Browsern (seit 2021) und eignet sich ideal für eingebettete Videos, Karten, Bildplatzhalter und Vorschaubilder. Kombinieren Sie sie bei Bildern mit object-fit: cover, damit sie zugeschnitten statt verzerrt werden.

Der Code enthält außerdem die ältere Padding-Top-Technik als Fallback: Ein prozentuales Padding wird aus der Breite berechnet, sodass padding-top: 56.25% (9 ÷ 16) eine 16:9-Fläche reserviert, in der der Inhalt absolut positioniert wird. Diese brauchen Sie nur noch für sehr alte Browser.

Wenn Sie den Platz über ein Seitenverhältnis reservieren, springt das Layout nicht mehr, während Bilder und Videos laden. Das verbessert den Cumulative-Layout-Shift-Wert (CLS).