CSS-Seitenverhältnis-Rechner

Das Seitenverhältnis beschreibt die proportionale Beziehung zwischen Breite und Höhe eines Elements. Es wird als zwei durch einen Doppelpunkt getrennte Zahlen geschrieben, etwa 16:9, und bleibt bei gleicher Skalierung beider Maße unverändert. In der Webentwicklung reservieren solche Verhältnisse stabilen Platz für Bilder, Videos, Einbettungen, Karten und responsive Komponenten, bevor deren Inhalte vollständig geladen sind. Dieser Rechner kürzt beliebige ganzzahlige Maßpaare und erzeugt die entsprechende moderne CSS-Deklaration. Zum Kürzen dient der größte gemeinsame Teiler von Breite und Höhe. Bei 1920 mal 1080 ist er 120. Teilt man beide Maße durch 120, erhält man 16 mal 9. Der Dezimalwert ist Breite geteilt durch Höhe; 16:9 ergibt ungefähr 1.7778. CSS akzeptiert in aspect-ratio sowohl gekürzte Zahlen als auch Originalmaße. Gekürzte Werte lassen sich jedoch leichter erkennen und prüfen. Die erzeugte Deklaration kann in eine Regel für Bildcontainer, Videorahmen, Rasterelemente oder andere Boxen eingefügt werden. Die Eigenschaft aspect-ratio legt ein bevorzugtes Verhältnis fest. Bei bestimmter Breite und automatischer Höhe leitet der Browser die Höhe daraus ab. Bei bestimmter Höhe und automatischer Breite kann er die Breite ableiten. Sind beide Maße ausdrücklich festgelegt, überschreibt das Verhältnis sie nicht. Inhalt, Mindest- und Höchstgrößen, Box-Sizing und Layoutbeschränkungen können ebenfalls die gerenderten Maße beeinflussen. width: 100% zusammen mit einem Seitenverhältnis ist eine gängige Methode für responsive Mediencontainer. Seitenverhältnis und Auflösung sind verschieden. Zwei Bilder können beide 16:9 haben und dennoch sehr unterschiedliche Pixelzahlen enthalten, etwa 1280 mal 720 und 3840 mal 2160. Das Verhältnis bestimmt die Form, die Auflösung beeinflusst Details, Dateigröße und Darstellungsdichte. Ein Zuschnitt auf ein neues Verhältnis entfernt Inhalte; das vollständige Einpassen in eine anders geformte Box kann Leerraum erzeugen. CSS-Werte wie cover und contain für object-fit steuern, wie ersetzte Inhalte innerhalb der reservierten Box dargestellt werden. Verwenden Sie zur Vermeidung von Layoutverschiebungen die intrinsischen Maße der Quelldatei. Die HTML-Attribute width und height ermöglichen dem Browser, ein Verhältnis abzuleiten, auch wenn responsives CSS die Anzeigegröße verändert. Prüfen Sie bei gestalterisch wechselnden Bildquellen oder ungewöhnlichen Breakpoints, ob jede ausgewählte Quelle den gewünschten Ausschnitt zeigt. Der Rechner funktioniert mit jeder gemeinsamen Einheit, weil nur das Verhältnis zählt. Er verlangt jedoch Ganzzahlen, damit die Berechnung über den größten gemeinsamen Teiler exakt ist und ein klares, vorhersehbares Verhältnis liefert.