Wie kann ich das Seitenverhältnis eines Divs reaktionsschnell beibehalten, indem ich nur CSS verwende?

So behalten Sie das Div-Seitenverhältnis mit Responsive Sizing bei

Während CSS es Bildern ermöglicht, ihr Seitenverhältnis mit einer prozentualen Breite oder Höhe beizubehalten, ist dies bei derselben Technik möglicherweise nicht der Fall scheinen direkt auf andere Elemente anwendbar zu sein. Es ist jedoch möglich, das Seitenverhältnis eines Divs mit reinem CSS beizubehalten.

Lösung:

Nutzen Sie die Tatsache, dass sich die Prozentsätze für die Auffüllung am oberen Rand auf den Inhalt beziehen Blockbreite. Durch die Kombination mit einer verschachtelten Div-Struktur können Sie ein Element mit gesperrtem Seitenverhältnis erstellen.

Beispiel:

.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;
}

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

In diesem Beispiel ist das .wrapper div hat eine Breite von 50 %. Ein Pseudoelement (.wrapper:after) wird hinzugefügt, um das Seitenverhältnis festzulegen – in diesem Fall ist es 16:9. Das verschachtelte .main-Div füllt das gesamte .wrapper-Div aus und stellt sicher, dass der Inhalt das angegebene Seitenverhältnis beibehält, wenn die Größe des .wrapper-Div geändert wird.

Das obige ist der detaillierte Inhalt vonWie kann ich das Seitenverhältnis eines Divs reaktionsschnell beibehalten, indem ich nur CSS verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!