Wie kann ich das Seitenverhältnis bei der automatischen Größenänderung von Div-Elementen mithilfe von CSS beibehalten?

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

Div-Elemente können schwierig zu gestalten sein, wenn sie an unterschiedliche Bildschirmgrößen angepasst und gleichzeitig beibehalten werden müssen ein bestimmtes Seitenverhältnis. Dies kann mithilfe der CSS-Eigenschaft „aspect-ratio“ zusammen mit einer intuitiven Kombination aus Breiten- und Höhenattributen erreicht werden.

Um sowohl Breiten- als auch Höhenänderungen elegant zu verarbeiten, können Sie die Berechnung des Seitenverhältnisses nutzen – r = Breite / Höhe . So implementieren Sie es in CSS:

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

.stage {
  --r: 960 / 540;

  aspect-ratio: var(--r);
  width: min(90%, min(960px, 90vh * var(--r)));
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  background: 
    linear-gradient(30deg, red 50%, transparent 50%),
    chocolate;
}

In diesem Beispiel:

• --r ist eine benutzerdefinierte CSS-Variable, die das Seitenverhältnis als Dezimalzahl speichert.
• Die Eigenschaft „aspect-ratio“ legt das berechnete Seitenverhältnis fest.
• Die Eigenschaft „width“ berechnet den Mindestwert zwischen 90 % des verfügbaren Platzes, 960 Pixel und 90 % der Höhe des Ansichtsfensters multipliziert mit dem Seitenverhältnis. Dadurch wird sichergestellt, dass die Breite proportional zur Höhe bleibt.
• Die Höhe wird durch die Eigenschaft „aspect-ratio“ in Verbindung mit der berechneten Breite bestimmt.

Ein solcher Ansatz stellt sicher, dass das div-Element passt die Größe automatisch an und behält dabei das gewünschte Seitenverhältnis bei, wobei sowohl Breiten- als auch Höhenvariationen berücksichtigt werden.

Das obige ist der detaillierte Inhalt vonWie kann ich das Seitenverhältnis bei der automatischen Größenänderung von Div-Elementen mithilfe von CSS beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!