Wie behalte ich das Seitenverhältnis bei, wenn ich die Größe eines Div-Elements automatisch ändere?

So behalten Sie das Seitenverhältnis bei, während Sie die Größe eines Div-Elements automatisch ändern

Erstellen eines Div-Elements, das seine Größe automatisch anpasst und dabei ein bestimmtes Seitenverhältnis beibehält kann eine Herausforderung sein. Das Ziel besteht darin, sicherzustellen, dass das Div innerhalb des Fensters zentriert bleibt und je nach Bedarf verkleinert oder erweitert wird, um in den verfügbaren Platz zu passen, ohne seine Form zu verzerren.

Der Schlüssel dazu liegt in der Verwendung von CSS-Eigenschaften, die ein Seitenverhältnis ermöglichen Kontrolle und adaptive Größenanpassung. Die Eigenschaft „aspect-ratio“ ist ein leistungsstarkes, in CSS3 eingeführtes Tool, mit dem Entwickler ein intrinsisches Verhältnis zwischen Höhe und Breite angeben können. Dieses Verhältnis wird unabhängig vom verfügbaren Platz beibehalten.

Zusätzlich zum Seitenverhältnis können die Eigenschaften „min-width“ und „min-height“ verwendet werden, um Mindestabmessungen für das Div festzulegen. Durch die Kombination dieser Eigenschaften können wir ein div-Element erstellen, das das angegebene Seitenverhältnis berücksichtigt und gleichzeitig in den verfügbaren Fensterraum passt.

Betrachten Sie den folgenden CSS-Code:

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 , definieren wir eine Variable --r, um das Verhältnis von 960 zu 540 zu speichern, das das gewünschte Seitenverhältnis darstellt. Die Eigenschaft „aspect-ratio“ wird dann verwendet, um dieses Verhältnis beizubehalten.

Die Eigenschaft „width“ wird auf mindestens 90 % der verfügbaren Breite, 960 Pixel, oder die berechnete Breite basierend auf der verfügbaren Höhe und dem verfügbaren Seitenverhältnis festgelegt. Dadurch wird sichergestellt, dass das Div das angegebene Verhältnis beibehält, während es in das Fenster passt.

Die Eigenschaften „min-width“ und „min-height“ werden nicht explizit festgelegt, aber ihre Standardwerte „auto“ ermöglichen es dem Div, sich entsprechend zu verkleinern kleinere Fenstergrößen unter Beibehaltung des Seitenverhältnisses.

Die Anzeigeeigenschaft ist auf „Flex“ eingestellt, um eine zentrierte Ausrichtung innerhalb des umschließenden Div zu ermöglichen, und die Eigenschaften „justify-content“ und „align-items“ werden verwendet um den Inhalt innerhalb des Div zu zentrieren.

Dadurch ändert sich die Größe des Bühnen-Div-Elements automatisch unter Beibehaltung seines Seitenverhältnisses, wodurch sichergestellt wird, dass es unabhängig von den Fensterabmessungen zentriert und visuell konsistent bleibt.

Das obige ist der detaillierte Inhalt vonWie behalte ich das Seitenverhältnis bei, wenn ich die Größe eines Div-Elements automatisch ändere?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!