Anleitung
- Geben Sie zum Ändern der Größe das Verhältnis ein (zum Beispiel 16 und 9) oder wählen Sie ein gängiges Verhältnis aus. Geben Sie dann eine Breite oder Höhe ein. Die jeweils andere Größe wird berechnet.
- Geben Sie Breite und Höhe eines Bildes, Bildschirms oder Videos ein, um das Seitenverhältnis zu ermitteln.
- Prüfen Sie die Vorschau und kopieren Sie bei Bedarf die CSS-Regel aspect-ratio für Ihr Weblayout.
So funktioniert es
Beim proportionalen Skalieren gilt: Höhe = Breite × Höhe des Seitenverhältnisses ÷ Breite des Seitenverhältnisses (und umgekehrt). Pixelmaße sind üblicherweise ganze Zahlen, daher kann das Ergebnis gerundet werden. Geht ein Seitenverhältnis nicht ohne Rest auf, etwa 16:9 bei einer Breite von 1000, ist die gerundete Höhe (563) eine Näherung und kein exakter Wert.
Ein Maß wird gekürzt, indem beide Seiten durch ihren größten gemeinsamen Teiler geteilt werden: 1920 und 1080 haben den gemeinsamen Teiler 120, daraus ergibt sich 16:9. Manche tatsächlichen Maße lassen sich nicht auf ein vertrautes Seitenverhältnis kürzen. 1366×768 entspricht genau 683:384 und liegt sehr nahe an 16:9. Deshalb zeigt das Tool auch das nächste gängige Seitenverhältnis an, wenn die Abweichung höchstens 2 % beträgt. Auch „21:9“-Monitore haben tatsächlich ein Verhältnis von 64:27 (2560×1080) oder 43:18 (3440×1440); 21:9 ist eine Marketingbezeichnung.
Mit aspect-ratio: 16 / 9 bleibt die Form eines Elements in CSS erhalten, wenn sich seine Breite ändert. Das ist nützlich für Video-Einbettungen und Bildplatzhalter, die das Layout beim Laden nicht verschieben sollen.
Beispiele
Größe eines Video-Vorschaubilds
Ein Vorschaubild im Format 16:9 muss 720 Pixel hoch sein, wenn es 1280 Pixel breit sein soll.
Seitenverhältnis eines Bildschirms bestimmen
2560×1600 lässt sich zu 8:5 kürzen, was dem Format 16:10 entspricht, das bei Laptops verbreitet ist.
Hochformat-Zuschnitt für soziale Medien
Bei einem Seitenverhältnis von 4:5 und einer Breite von 1080 beträgt die Höhe 1350 – ein Hochformat, das viele Feeds akzeptieren.
Häufig gestellte Fragen
Ist 16:9 dasselbe wie 1,78:1?
Ja. 16 ÷ 9 ≈ 1,778 – beide Angaben beschreiben also dieselbe Form. Kinoformate werden oft als Dezimalzahl angegeben, zum Beispiel 2,39:1.
Warum enthält mein Ergebnis Dezimalstellen?
Nicht jede Breite lässt sich ohne Rest durch das Verhältnis teilen. Aktivieren Sie für Pixelmaße das Runden. Das Ergebnis wird dann auf den nächsten ganzen Pixel gerundet und kann geringfügig vom exakten Verhältnis abweichen.
Funktioniert die CSS-Eigenschaft aspect-ratio überall?
Die Eigenschaft wird von allen aktuellen gängigen Browsern unterstützt. Sind für ein Element sowohl Breite als auch Höhe explizit festgelegt, haben diese Vorrang vor aspect-ratio.
Datenschutz
Alle Berechnungen erfolgen in Ihrem Browser. Es werden keine Daten gesendet oder gespeichert.