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

Die Breite eines Elements als Prozentsatz seiner Höhe beizubehalten kann eine Herausforderung sein. Während die Verwendung eines Prozentwerts für „padding-top“ den gegenteiligen Effekt erzielen kann, basiert „padding-left“ als Prozentsatz auf der Breite des Objekts und nicht auf seiner Höhe.

Um dieses Problem zu beheben, führt CSS die Eigenschaft „aspect-ratio“ ein. Bereitstellung einer eleganten Lösung zur Aufrechterhaltung eines konsistenten Seitenverhältnisses basierend auf der Höhe. Der folgende Codeausschnitt demonstriert seine Verwendung:

.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}

In diesem Beispiel hat das .box-Element eine fließende Höhe von 50 % und ein Seitenverhältnis von 2:1. Wenn sich die Höhe des Containers ändert, passen sich Höhe und Breite des Felds entsprechend an, wobei das Seitenverhältnis erhalten bleibt.

Die Eigenschaft „aspect-ratio“ stellt sicher, dass die Breite des Felds proportional zu seiner Höhe bleibt, unabhängig vom Textinhalt oder der Größe des Containers . Dies macht komplexe JavaScript-Lösungen überflüssig und bietet einen sauberen und effizienten reinen CSS-Ansatz zur Aufrechterhaltung von Seitenverhältnissen.