Wie behalte ich das Seitenverhältnis bei Divs mit automatischer Größenänderung bei?

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

Problemstellung

Erstellen Sie ein Div Element, das:

• seine Größe automatisch an den verfügbaren Bildschirm anpasst Platz
• Behält das ursprüngliche Seitenverhältnis bei, wenn die Größe geändert wird
• Passt in die angegebenen Breiten- und Höhenabmessungen

Lösung

Nutzung Mit der Eigenschaft des Seitenverhältnisses können Sie das gewünschte erreichen Verhalten:

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: 
    /* this gradient is a proof that the ratio is maintained since the angle is fixed */
    linear-gradient(30deg,red 50%,transparent 50%),
    chocolate;
}

Erläuterung

• aspect-ratio: var(--r): Definiert das gewünschte Seitenverhältnis ( 960px: 540px)

• width: Berechnet die Breite basierend auf dem kleineren von:

  • 90 % der verfügbaren Fensterbreite
  • 960px
  • 90 % der Fensterhöhe multipliziert mit dem Seitenverhältnis Verhältnis
• Linearer Verlaufshintergrund:Demonstriert, wie das Hintergrundmuster sein Seitenverhältnis beibehält, während die Größe geändert wird.

Mit dieser Lösung können Sie erstellen ein Div, dessen Größe sich automatisch ändert und dabei sein ursprüngliches Seitenverhältnis innerhalb der angegebenen maximalen Abmessungen beibehält.

Das obige ist der detaillierte Inhalt vonWie behalte ich das Seitenverhältnis bei Divs mit automatischer Größenänderung bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!