Wie behalte ich das Div-Seitenverhältnis basierend auf der Höhe mithilfe von CSS bei?

Div-Seitenverhältnis basierend auf der Höhe mithilfe von CSS beibehalten

In bestimmten Szenarien müssen Sie möglicherweise sicherstellen, dass die Breite eines Elements einen Prozentsatz von beibehält seine Höhe, unabhängig von der Höhenvariabilität. Zwar gibt es hierfür eine JavaScript-Lösung, aber auch CSS bietet möglicherweise einen eleganten Ansatz.

Um dies zu erreichen, nutzen Sie die Eigenschaft „aspect-ratio“:

<code class="css">.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}</code>

Hier kommt die Eigenschaft „aspect-ratio“ wirklich zum Einsatz leuchtet:

• Es stellt eine feste Beziehung zwischen der Höhe und Breite eines Elements her.
• Dadurch bleibt das Seitenverhältnis der Box (in diesem Fall 2:1) unabhängig davon erhalten Fensterhöhe ändert sich.

Diese Lösung stellt sicher, dass die Breite des Elements immer 50 % seiner Höhe beträgt, auch wenn die Fenstergröße vertikal geändert wird.

Das obige ist der detaillierte Inhalt vonWie behalte ich das Div-Seitenverhältnis basierend auf der Höhe mithilfe von CSS bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!