Wie erstelle ich ein responsives quadratisches Div mit gleicher Höhe und Breite?

Responsives quadratisches Div mit gleicher Höhe und Breite

Ihr Ziel ist es, ein Div-Element zu erstellen, das seine Höhe automatisch an seine Breite anpasst. unabhängig von der Größe des übergeordneten Elements. Um dies zu erreichen, bietet CSS eine einfache und effektive Lösung:

Verwenden von Percentage Padding-Bottom:

Fügen Sie das folgende CSS zu Ihrem div hinzu:

height: 0;
width: 20%;
padding-bottom: 20%;
background-color: red;

So funktioniert es:

• Setzen Sie die Höhe auf 0 und machen Sie zunächst das Div minimiert.
• Geben Sie eine prozentuale Breite an (z. B. 20 %).
• Setzen Sie padding-bottom auf denselben Prozentsatz wie die Breite. Dies bestimmt die Höhe des Div.
• Die Hintergrundfarbe wird hinzugefügt, um das Quadrat sichtbar zu machen.

Optionale verschachtelte Div:

Für mehr Flexibilität bei der Platzierung von Inhalten sollten Sie die Erstellung eines verschachtelten Div innerhalb des quadratischen Div in Betracht ziehen. Dadurch können Sie Inhalte je nach Bedarf zentrieren oder ausrichten.

<div>

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