Wie erstelle ich mit CSS ein responsives quadratisches Div?

Wie erstelle ich ein responsives quadratisches Div mit CSS?

Diese zuvor gestellte Frage sucht nach einer Methode, um die Höhe eines Divs dynamisch an seine Breite anzupassen. Die Breite wird in Prozent ausgedrückt. Wenn also die Breite des übergeordneten Elements abnimmt, sollte das Div proportional verkleinert werden.

Um dies zu beheben, können wir die Eigenschaft „padding-bottom“ von CSS verwenden. Indem wir padding-bottom als Prozentsatz festlegen, können wir ein Verhältnis zwischen der Höhe und Breite des Divs erstellen und so sicherstellen, dass sie gleich bleiben.

Hier ist ein Beispiel für den Code:

<div>

Hier Code erstellt das äußere Div eine quadratische Form mit Breite: 20 % und Höhe: 0. Der Padding-Bottom von 20 % legt das Verhältnis zwischen Höhe und Breite fest, was zu a führt Seitenverhältnis 1:1. Das innere Div enthält den eigentlichen Inhalt.

Zusätzlich wird eine JavaScript-Fiddle-Demonstration bereitgestellt, um die Funktionalität zu demonstrieren: [Link zu Fiddle]

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS ein responsives quadratisches Div?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!