Wie behalte ich das Seitenverhältnis eines Div basierend auf Breite und Höhe bei?

Seitenverhältnis entsprechend Breite und Höhe beibehalten

Beim Bestreben, ein zentriertes quadratisches Div innerhalb des Ansichtsfensters zu positionieren, stellt sich die Frage: Wie kann man sein Seitenverhältnis effektiv beibehalten? und dabei sowohl die Breiten- als auch die Höhenabmessungen berücksichtigen?

Die Einführung der CSS-Seitenverhältniseigenschaft im Jahr 2022 bietet eine umfassende Lösung für diese Herausforderung. Mit dieser Eigenschaft können Entwickler jedes Seitenverhältnis relativ zur Größe des Ansichtsfensters oder des übergeordneten Elements beibehalten.

Um unser Ziel zu erreichen, das Seitenverhältnis basierend auf den Abmessungen des Ansichtsfensters beizubehalten, kann der folgende CSS-Code verwendet werden:

<code class="css">.ar-1-1 {
  aspect-ratio: 1 / 1;
  background: orange;
}

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}</code>

Dieser Codeausschnitt veranschaulicht zwei Seitenverhältnisse: 1:1 bzw. 1:19. Die Div-Elemente, die diese Seitenverhältnisse verwenden, passen ihre Abmessungen automatisch an, um diese Verhältnisse im Ansichtsfenster beizubehalten und so ein einheitliches visuelles Erscheinungsbild unabhängig von der Größe oder Ausrichtung des Ansichtsfensters sicherzustellen.

Das obige ist der detaillierte Inhalt vonWie behalte ich das Seitenverhältnis eines Div basierend auf Breite und Höhe bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!