Heim > Web-Frontend > CSS-Tutorial > Wie behalte ich das Seitenverhältnis eines Div basierend auf Breite und Höhe bei?

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

Barbara Streisand
Freigeben: 2024-10-31 02:54:02
Original
360 Leute haben es durchsucht

How to Maintain Aspect Ratio of a Div Based on Width and Height?

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage