Wie erstelle ich ein responsives quadratisches Div mit Seitenverhältnis und Zentrierung?

Beibehalten des Seitenverhältnisses gemäß den Abmessungen des Ansichtsfensters

Um eine reaktionsfähige quadratische Div zu erreichen, die ihr Seitenverhältnis basierend auf der Breite und Höhe des Ansichtsfensters beibehält, nutzen Sie die Hebelwirkung Das Seitenverhältnis von CSS Eigenschaft.

Anforderungen:

• Reines CSS
• Quadrat passt sich unabhängig von der Ausrichtung an die Mindestabmessung des Ansichtsfensters an
• Horizontal und vertikale Zentrierung innerhalb des Ansichtsfensters

Die Aspektverhältnis-Lösung

Mit der Eigenschaft „aspektverhältnis“ können Sie das gewünschte Seitenverhältnis angeben. Standardmäßig legt die Eigenschaft die Höhe relativ zur Breite fest. Daher erzeugt ein Seitenverhältnis von 1/1 ein Quadrat.

<code class="css">.square {
  aspect-ratio: 1 / 1;
  background: orange;
}</code>

Anpassung an die Abmessungen des Ansichtsfensters

Um sicherzustellen, dass sich Ihre quadratische Teilung an die Mindestabmessungen des Ansichtsfensters anpasst:

<code class="css">div {
  max-width: 100vw;
  max-height: 100vh;
  margin: 0 auto;  /* For centering */
}</code>

Vertikal und Horizontal Zentrierung

Um das Quadrat zu zentrieren, muss der Rand sowohl vertikal als auch horizontal automatisch eingestellt werden:

<code class="css">div {
  ...
  margin: 0 auto;
}</code>

Beispiel

<code class="html"><div class="square">Aspect ratio 1:1</div></code>

Fazit

Mithilfe des Seitenverhältnisses können Sie ein ansprechendes Quadrat erstellen Divs, die ihr Seitenverhältnis beibehalten und im Ansichtsfenster zentriert sind, um unabhängig von den Abmessungen oder der Ausrichtung des Ansichtsfensters ein konsistentes visuelles Erlebnis zu gewährleisten.

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