CSS-aspect-ratio-Generator
Geben Sie eine Breite und eine Höhe ein, um sofort den passenden CSS-Wert aspect-ratio zu erhalten, gekürzt und mit visueller Vorschau. Die Berechnung erfolgt vollständig in Ihrem Browser, es wird nichts an einen Server gesendet.
So funktioniert es
Die CSS-Eigenschaft aspect-ratio hält die Proportionen eines Elements (Bild, Video, Container) automatisch ein, auch wenn sich seine Breite ändert – ganz ohne Padding-Tricks in Prozent. Dieses Werkzeug berechnet das Verhältnis aus den eingegebenen Maßen, kürzt es, wenn möglich, und zeigt eine Vorschau des entstehenden Rechtecks an.
Warum aspect-ratio statt einer festen Höhe verwenden?
Eine feste Höhe in Pixeln zerstört das Layout auf einem schmaleren oder breiteren Bildschirm; aspect-ratio behält das richtige Seitenverhältnis unabhängig von der tatsächlichen Größe des Elements bei, was besonders für responsive Videos, Bildkarten oder Galerie-Vorschaubilder nützlich ist.
Was bedeutet das angezeigte gekürzte Verhältnis?
Das Werkzeug kürzt Ihr Breiten-/Höhenverhältnis automatisch mithilfe des größten gemeinsamen Teilers auf seine einfachste Form (zum Beispiel wird 1920 / 1080 zu 16 / 9). Das ergibt einen besser lesbaren Wert, der sich in Ihrem Stylesheet leichter wiederverwenden lässt.
100% lokale Verarbeitung: Berechnung und Vorschau laufen ausschließlich in Ihrem Browser.