Wie kann ich das Seitenverhältnis in einem veränderbaren, zentrierten Div-Element beibehalten?

Beibehalten des Seitenverhältnisses bei der automatischen Größenänderung von Div-Elementen

Beim Erstellen eines in der Größe veränderbaren Div-Elements, das auf dem Bildschirm zentriert bleibt, ist es wichtig sicherzustellen, dass dies gewährleistet ist dass das Seitenverhältnis unabhängig von Änderungen der Fenstergröße beibehalten wird. Dies kann mithilfe von CSS-Techniken erreicht werden.

CSS-Lösung:

Die Eigenschaft „aspect-ratio“ bietet eine einfache Lösung zum Beibehalten des Seitenverhältnisses bei der Größenänderung von div-Elementen. Der folgende CSS-Code zeigt, wie dies erreicht wird:

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

.stage {
  --r: 960 / 540;  // Define the desired aspect ratio (width / height)

  aspect-ratio: var(--r);  // Set the aspect ratio
  width:min(90%, min(960px, 90vh*(var(--r))));  // Set the maximum width and height while preserving ratio

  display: flex;
  justify-content: center;
  align-items: center;

  background: 
    linear-gradient(30deg,red 50%,transparent 50%),  // Add a gradient to visualize the preserved aspect ratio
    chocolate;
}

Erklärung:

• Die Eigenschaft „aspect-ratio“ legt das gewünschte Seitenverhältnis für das Element fest. die auf der Grundlage der anfänglichen Breiten- und Höhenwerte (960 Pixel bzw. 540 Pixel) berechnet wird.

• Die Breiteneigenschaft stellt sicher, dass die Breite des Elements innerhalb der angegebenen Einschränkungen bleibt:

  • Maximal 90 % der verfügbaren Breite
  • Maximal 960 Pixel
  • Eine Breite, die die beibehält Seitenverhältnis im Verhältnis zur verfügbaren Höhe (90vh multipliziert mit var(--r))
• Der Hintergrundverlauf wird hinzugefügt, um visuell zu zeigen, dass das Seitenverhältnis beibehalten wird, da der Winkel des Verlaufs unabhängig von Änderungen in den Abmessungen des Elements konstant bleibt.

Ergebnis:

Der obige CSS-Code führt zu einem div-Element, das zentriert bleibt auf dem Bildschirm, behält das gewünschte Seitenverhältnis bei und passt die Größe an den verfügbaren Fensterraum an. Diese Lösung eignet sich effektiv für die Größenänderung sowohl der Breite als auch der Höhe des Elements.

Das obige ist der detaillierte Inhalt vonWie kann ich das Seitenverhältnis in einem veränderbaren, zentrierten Div-Element beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!