Heim  >  Artikel  >  Web-Frontend  >  Wie erstelle ich ein responsives, quadratisches Div in CSS?

Wie erstelle ich ein responsives, quadratisches Div in CSS?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-10 18:44:03812Durchsuche

How to Create a Responsive, Square-Shaped 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn