Aufrechterhaltung des Seitenverhältnisses in auto-ressizing-divelementen

Bei der Erstellung eines resizenten Div-Elements, das auf dem Bildschirm zentriert bleibt, ist es wichtig, dass sein Seitenverhältnis gepflegt wird, unabhängig von der Fenstergröße. Dies kann mit CSS-Techniken erreicht werden.

CSS-Lösung:

Die Eigenschaft Aspekt-Raten bietet eine einfache Lösung, um das Seitenverhältnis bei der Änderung der Änderung von Divisionen beizubehalten. Der folgende CSS -Code zeigt, wie dies erreicht werden kann:

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;
}

Erläuterung:

• Die Eigenschaft von Aspekt-Raten legt das gewünschte Seitenverhältnis für das Element fest, das basierend auf der anfänglichen Breite und der Höhenwerte berechnet wird (960px bzw. 540px). Spezifizierte Einschränkungen:

• maximal 90% der verfügbaren Breite

  ein Maximum von 960px
  eine Breite, die das Seitenverhältnis in Bezug auf die verfügbare Größe aufrechterhält (90vh multiplomiert durch var (-r). hinzugefügt, um visuell zu zeigen, dass das Seitenverhältnis beibehalten wird, da der Winkel des Gradienten unabhängig von Änderungen in den Dimensionen des Elements konstant bleibt. Diese Lösung eignet sich effektiv für die Größe sowohl der Breite als auch der Höhe des Elements.