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

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

Linda Hamilton
Freigeben: 2024-11-02 05:05:02
Original
628 Leute haben es durchsucht

How to Maintain a Div's Aspect Ratio Based on Its Height Using CSS?

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

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

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>
Nach dem Login kopieren
<code class="css">.demo {
  width: 90vw;
  height: 90vh;
  overflow: auto;
  resize: both;
  outline: 1px solid #999;
}</code>
Nach dem Login kopieren

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!

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