Wie kann ich das Seitenverhältnis beibehalten, wenn ich die Größe eines Div mit CSS responsiv ändere?

Div-Abmessungen reaktionsschnell ändern und dabei das Seitenverhältnis beibehalten

Beim Arbeiten mit Bildern wird durch Anwenden eines Prozentwerts auf deren Breite oder Höhe das Seitenverhältnis beibehalten wenn sie sich ausdehnen oder schrumpfen. Allerdings kann es eine Herausforderung sein, dieses Verhalten mit anderen Elementen zu reproduzieren.

Glücklicherweise bietet CSS eine Lösung, um die Breite und Höhe eines Elements mithilfe von Prozentsätzen zu verknüpfen und so sicherzustellen, dass sein Seitenverhältnis konsistent bleibt.

Lösung mit CSS

Dies kann durch die überraschende Tatsache erreicht werden, dass der Prozentwert der Eigenschaft „padding-top“ relativ zum Wert des enthaltenden Blocks ist Breite. Betrachten Sie das folgende CSS-Snippet:

.wrapper {
  width: 50%;
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%;
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue;
  color: white;
}

HTML-Beispiel:

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>

In diesem Beispiel legt das „.wrapper“-Div die Breite auf 50 % fest ( oder ein beliebiger Prozentsatz) und erstellt einen relativen Kontext für das innere „.main“-Div.

Das „.wrapper:after“ Pseudoelement verwendet die Eigenschaft padding-top, um ein Füllverhältnis von 56,25 % festzulegen. Dieses Verhältnis stellt ein Seitenverhältnis von 16:9 dar und stellt sicher, dass das „.main“-Div dieses Seitenverhältnis immer beibehält.

Schließlich füllt das „.main“-Div den gesamten „.wrapper“-Container und behält dabei sein Seitenverhältnis bei Verhältnis und präsentiert seinen tiefhimmelblauen Hintergrund und weißen Text.

Das obige ist der detaillierte Inhalt vonWie kann ich das Seitenverhältnis beibehalten, wenn ich die Größe eines Div mit CSS responsiv ändere?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!