Wie erstelle ich ein responsives, quadratisches Div in CSS?

Ein reaktionsfähiges, quadratisches Div erstellen

Frage:

Wie können Sie ein Div-Element in CSS entwerfen? Ein quadratisches Seitenverhältnis beibehalten und seine Höhe proportional zu seiner Breite anpassen, wenn die Größe des übergeordneten Elements geändert wird?

Antwort:

Es gibt eine einfache Technik, um dies mithilfe der Auffüllung zu erreichen:

1. Setzen Sie die Höhe des Div auf 0. Dies „täuscht“ den Browser, die Höhe flexibel zu gestalten.
2. Definieren Sie die Breite des Div als Prozentsatz.
3. Stellen Sie den Padding-Bottom auf den gleichen Prozentsatz wie die Breite ein. Dadurch wird der Browser gezwungen, die Höhe anzupassen, um ein quadratisches Seitenverhältnis beizubehalten.

Hier ist ein Codebeispiel:

<div>

Das äußerste Div legt die quadratische Form fest, während das innere Div enthält den eigentlichen Inhalt. Dieser Ansatz behält effektiv ein quadratisches Seitenverhältnis bei, wenn sich die Breite des übergeordneten Elements ändert. Es ist mit den meisten Browsern kompatibel.

Ein Live-Beispiel finden Sie auf jsfiddle: [jsfiddle-Link hier einfügen]

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