Wie behalte ich das Seitenverhältnis eines Div basierend auf seiner Höhe mithilfe von CSS bei?

Beibehalten des Div-Seitenverhältnisses basierend auf der Höhe mithilfe von CSS

Wenn es darum geht, die Proportionen eines Elements beizubehalten, ist die traditionelle Lösung die Verwendung von ein prozentualer Wert für die vertikale Auffüllung. Allerdings ist es nicht so einfach, den gleichen Effekt mit horizontaler Polsterung zu erzielen. In diesem Artikel wird ein CSS-basierter Ansatz zum Beibehalten des Seitenverhältnisses eines div-Elements basierend auf seiner Höhe untersucht.

Die gewünschte Markup-Struktur lautet wie folgt:

<div class="box">
  <div class="inner"></div>
</div>

Um das Seitenverhältnis beizubehalten können wir die CSS-Eigenschaft „aspect-ratio“ nutzen:

<code class="css">.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}</code>

Die Eigenschaft „aspect-ratio“ gibt das Verhältnis der Breite zur Höhe des Elements an. In diesem Fall bedeutet ein Verhältnis von 2:1, dass die Breite doppelt so hoch ist.

Indem Sie die Höhe des übergeordneten Elements (Box) auf einen fließenden Wert (z. B. 50 %) festlegen und anpassen Mit der Eigenschaft „Seitenverhältnis“ können wir sicherstellen, dass die Breite proportional zur Höhe skaliert.

Um den Effekt zu demonstrieren, können Sie das folgende HTML und CSS berücksichtigen Code:

<code class="html"><div class="demo">
  <div class="box">
    <ul>
      <li>This box has fluid height of 50%</li>
      <li>It has an aspect ratio of 2:1</li>
      <li>Resize the container vertically (or horizontally)</li>
      <li>The box will maintain its aspect ratio</li>
      <li>The text content will not affect its width</li>
    </ul>
  </div>
</div></code>

<code class="css">.demo {
  width: 90vw;
  height: 90vh;
  overflow: auto;
  resize: both;
  outline: 1px solid #999;
}</code>

Eine Größenänderung des Containers (.demo) zeigt, dass die Box (Box) ihre Breite anpasst und dabei ihr Seitenverhältnis von 2:1 beibehält. Diese Lösung bietet eine saubere und effektive Möglichkeit, die gewünschten Proportionen eines Elements ausschließlich durch CSS beizubehalten.

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