Heim > Artikel > Web-Frontend > Wie erstelle ich ein responsives, quadratisches Div in CSS?
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:
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!