Wie behalte ich das Seitenverhältnis eines Divs während der Größenänderung mithilfe von CSS bei?

So ändern Sie reaktionsschnell die Div-Größe unter Beibehaltung des Seitenverhältnisses

Bei der Größenänderung von Bildern können Sie deren Seitenverhältnis ganz einfach beibehalten, indem Sie entweder deren Breite oder festlegen Höhe in Prozent. Allerdings kann es schwierig erscheinen, den gleichen Effekt für Nichtbildelemente zu erzielen. Können wir die Breite und Höhe eines Div mithilfe von Prozentsätzen verknüpfen, um das Seitenverhältnis bei der Größenänderung beizubehalten?

Lösung

Absolut! CSS bietet eine geniale Lösung für dieses Problem. Auch wenn es kontraintuitiv erscheinen mag, beziehen sich die Prozentsätze für die Auffüllung des oberen Rands tatsächlich auf die Breite des enthaltenden Blocks. Dadurch können wir eine dynamische Höhe basierend auf der angegebenen Breite erstellen.

Beachten Sie den folgenden CSS-Code:

.wrapper {
  width: 50%; /* Set the desired width */
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%; /* 16:9 aspect ratio */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue;
  color: white;
}

Im HTML werden wir das Div einschließen, mit dem wir die Größe ändern möchten eine Klasse von „wrapper“:

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

Dieses CSS erstellt ein Pseudoelement (::after) innerhalb des „wrapper“-Div. Indem wir den padding-top als Prozentsatz der Breite des Wrappers festlegen, legen wir effektiv das Seitenverhältnis des darin enthaltenen Div fest. Wenn sich die Größe des Wrappers ändert, ändert sich auch die Größe des Pseudoelements, wodurch sichergestellt wird, dass das enthaltene div („main“) immer das gewünschte Seitenverhältnis beibehält.

Das obige ist der detaillierte Inhalt vonWie behalte ich das Seitenverhältnis eines Divs während der Größenänderung mithilfe von CSS bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!