Hier sind einige mögliche Titel für Ihren Artikel, wobei der Schwerpunkt auf dem Frage-und-Antwort-Format liegt: * Kann ich ein quadratisches Div mit dynamischer Größe erstellen, das das Seitenverhältnis und die Mittelpunkte im Ansichtsfenster beibehält? *

Beibehalten des Seitenverhältnisses nach Breite und Höhe

Kann ein quadratisches Div dynamisch in das Ansichtsfenster eingepasst und zentriert werden, während sein Seitenverhältnis basierend auf Breite und Höhe beibehalten wird ?

Anforderungen:

• Nur-CSS-Lösung
• Quadratgröße passt sich automatisch an die des Ansichtsfensters an Mindestabmessung.
• Quadrat ist sowohl horizontal als auch vertikal zentriert.

Lösung:

Die Seitenverhältnis-Eigenschaft (2022 )

Um unser Ziel zu erreichen, nutzen Sie die Seitenverhältniseigenschaft (MDN-Referenz). Mit diesem bemerkenswerten Tool können wir das Verhältnis von Breite zu Höhe festlegen und so sicherstellen, dass das gewünschte Seitenverhältnis beibehalten wird.

Seitenverhältnis basierend auf der Größe des Ansichtsfensters (Breite und Höhe) beibehalten:

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

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}

/* For the demo */

body {
  margin: 0;
}</code>

<code class="html"><div class="ar-1-1">Aspect ratio 1:1</div>
<div class="ar-1-19">Aspect ratio 1:19</div></code>

In diesem Beispiel:

• Divs mit der Klasse ar-1-1 behalten ein Seitenverhältnis von 1:1 bei.
• Divs mit der Klasse ar-1- 19 behalten ein Seitenverhältnis von 16:9 bei.
• Alle Divs passen ihre Größe dynamisch an die Abmessungen des Ansichtsfensters an und sorgen so für eine ordnungsgemäße Zentrierung.

Das obige ist der detaillierte Inhalt vonHier sind einige mögliche Titel für Ihren Artikel, wobei der Schwerpunkt auf dem Frage-und-Antwort-Format liegt: * Kann ich ein quadratisches Div mit dynamischer Größe erstellen, das das Seitenverhältnis und die Mittelpunkte im Ansichtsfenster beibehält? *. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!