Wie kann ich das Seitenverhältnis in einem Div-Element beibehalten und gleichzeitig die Größe für verschiedene Fenstergrößen automatisch ändern?

Beibehalten des Seitenverhältnisses für die automatische Größenänderung von Div-Elementen in unterschiedlichen Fenstergrößen

In der Webentwicklung ist es oft wünschenswert, ein zentrales Div zu haben, das behält ein bestimmtes Seitenverhältnis bei und passt sich gleichzeitig an Änderungen in der Fenstergröße an. Es kann jedoch eine Herausforderung sein, eine Lösung zu finden, die sowohl für Breiten- als auch für Höhenanpassungen effektiv funktioniert.

Aktueller Ansatz

Der bereitgestellte CSS- und HTML-Code erstellt eine zentrierte Div, die beibehalten wird eine feste Größe. Wenn die Fenstergröße kleiner wird, verkleinert sich das Div, jedoch nicht in einer Weise, die sein ursprüngliches Seitenverhältnis beibehält.

Lösung mit der Eigenschaft „aspect-ratio“

Um dieses Problem zu beheben können Sie die Eigenschaft „Seitenverhältnis“ nutzen. Diese Eigenschaft wird mittlerweile weitgehend unterstützt und ermöglicht die Angabe eines festen Verhältnisses für die Abmessungen eines Elements.

<br>body {<br> height: 100vh;<br> margin: 0;<br> display: flex;<br> justify-content: center;<br> align-items: center;<br> Hintergrund: grau;<br>}</p>
<p>.stage {<br> --r: 960 / 540;</p>
<p>aspect-ratio: var(--r);<br> width: min(90%, min(960px, 90vh*(var(--r))));</p>
<p>Anzeige: flex;<br> justify-content: center;<br> align-items: center;</p>
<p>background:</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">/* this gradient is a proof that the ratio is maintained since the angle is fixed */
linear-gradient(30deg,red 50%,transparent 50%),
chocolate;

Nach dem Login kopieren

}

1. Seitenverhältnis berechnen: Die Variable --r speichert das Seitenverhältnis berechnet als Breite/Höhe der gewünschten Größe (960/540).
2. Seitenverhältnis festlegen: Die Eigenschaft „Seitenverhältnis“ legt das Seitenverhältnis auf den berechneten Wert fest. Dadurch wird sichergestellt, dass das Element dieses Verhältnis immer beibehält.
3. Breite berechnen: Die Breiteneigenschaft wird mithilfe einer min()-Funktion festgelegt, die die ursprüngliche Breite, 90 % der verfügbaren Fensterbreite, berücksichtigt. und 90vh mal das berechnete Seitenverhältnis. Diese Formel stellt sicher, dass das Element verkleinert wird, um in das Fenster zu passen und gleichzeitig sein Seitenverhältnis beizubehalten.
4. Div zentrieren und formatieren: Das Div wird mithilfe der Flexbox zentriert und sein Hintergrund wird mit einem Farbverlauf gestaltet um zu zeigen, dass das Seitenverhältnis auch dann beibehalten wird, wenn das Element verkleinert wird.

Diese Lösung stellt effektiv sicher, dass das div-Element sein Seitenverhältnis beibehält, während es sich an verschiedene Fenster anpasst Größen, sowohl in der Breite als auch in der Höhe.

Das obige ist der detaillierte Inhalt vonWie kann ich das Seitenverhältnis in einem Div-Element beibehalten und gleichzeitig die Größe für verschiedene Fenstergrößen automatisch ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!