Seitenverhältnis-Rechner
Geben Sie die Ausgangsmaße ein und ändern Sie Zielbreite oder Zielhöhe. Sie erhalten passende Maße und ein CSS-Snippet.
Läuft lokal in deinem Browser ·
16:9
Geben Sie die Ausgangsmaße ein und ändern Sie Zielbreite oder Zielhöhe. Sie erhalten passende Maße und ein CSS-Snippet.
Läuft lokal in deinem BrowserZwei Pixelmaße gehen hinein, drei Dinge kommen heraus: das Verhältnis in kleinster Form, eine zweite Größe mit demselben Verhältnis und eine CSS-Deklaration für das Element, das seine Form behalten soll. Es ist Rechnen mit Zahlen — kein Bild wird geöffnet, skaliert oder hochgeladen.
Alle Felder rechnen beim Tippen neu. Quellbreite und Quellhöhe legen das Verhältnis fest, und das Zielfeld, das Sie bearbeiten, berechnet die andere Seite neu, sodass das Verhältnis auch bei halb getippten Werten erhalten bleibt.
Das gekürzte Verhältnis teilt die Quellmaße durch ihren größten gemeinsamen Teiler: 1920 × 1080 wird zu 16:9, 1366 × 768 zu 683:384, weil diese Zahlen keinen kleineren gemeinsamen Teiler haben. Die proportionale Größe ist das Zielpaar, auf ganze Pixel gerundet. Das Dezimalverhältnis ist Breite ÷ Höhe mit sechs Nachkommastellen (1.777778 bei 16:9). Der Padding-Fallback ist Höhe ÷ Breite in Prozent — 56.2500 % bei 16:9 —, also der Wert, den die alte Prozent-Padding-Technik braucht.
Copy CSS schreibt aspect-ratio: 16 / 9; für die Form, width: 100%; damit das Element seine Spalte füllt, und eine auskommentierte padding-top-Zeile als Rückfall. Behalten Sie die Padding-Zeile, wenn dasselbe Stylesheet auch in einer Engine funktionieren muss, die die Eigenschaft aspect-ratio ignoriert; sonst können Sie den Kommentarblock löschen. Weil das Snippet das gekürzte Paar verwendet, erscheint ein Verhältnis wie 683:384 so, wie es berechnet wurde.
Für das Paar werden nur ganze Zahlen verwendet: Ein Dezimalmaß wird vor dem größten gemeinsamen Teiler auf die nächste ganze Zahl gerundet, während Dezimalverhältnis und Padding-Prozentsatz die eingegebenen Werte behalten. Vorgaben werden ebenso gekürzt, deshalb erscheint 21:9 als 7:3 — dasselbe Verhältnis in kleinster Form. Beide Quellwerte müssen größer als null sein; ist einer leer, null oder negativ, meldet das die Statuszeile und das letzte gültige Ergebnis bleibt stehen.
Weil jedes Verhältnis in kleinster Form ausgegeben wird: 21 und 9 sind beide durch 3 teilbar, also wird aus 21:9 der Wert 7:3. Das Verhältnis bleibt gleich, und aspect-ratio: 7 / 3 berechnet dieselbe Box wie aspect-ratio: 21 / 9.
Beide gehen. Das Bearbeiten der Breite berechnet die Höhe neu, das Bearbeiten der Höhe die Breite. Nehmen Sie die Seite, die Ihr Layout tatsächlich einschränkt — eine feste Spaltenbreite oder eine feste Höhe wie 600 px.
Er wird als kommentierte Zeile ausgegeben und kostet nichts. aspect-ratio beschreibt die Form in einer Eigenschaft; das prozentuale Padding ist die ältere Technik für Engines, die diese Eigenschaft ignorieren. Löschen Sie den Kommentarblock nur, wenn alle Zielbrowser sie unterstützen.
Ja. Das gekürzte Paar wird aus den gerundeten ganzen Zahlen berechnet — 1920,5 × 1080,25 ergibt 1921:1080 —, während Dezimalverhältnis (1.777829) und Padding-Prozentsatz die ungerundeten Zahlen verwenden.
Nein. Es berechnet nur Zahlen und CSS; die Datei wird nicht geöffnet. Für geänderte Pixel nehmen Sie den Bildskalierer, für den Container, der sie anzeigt, diese Seite.