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

Responsive Div mit beibehaltenem Seitenverhältnis mithilfe von CSS

Wenn Sie versuchen, ein Seitenverhältnis beizubehalten, während Sie die Größe eines Divs ändern, können Sie die Leistungsfähigkeit von nutzen CSS, ohne auf JavaScript angewiesen zu sein.

CSS ermöglicht es Ihnen, die Höhe und Breite eines Elements mithilfe von Prozentsätzen zu verknüpfen. So erreichen Sie das:

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

In diesem Beispiel legt das Wrapper-Div die gewünschte Breite (50 %) fest. Das Pseudoelement „wrapper:after“ verwendet einen Prozentsatz für die Auffüllung des oberen Rands im Verhältnis zur Breite des Wrappers. Der Wert 56,25 % entspricht einem Seitenverhältnis von 16:9.

Das Haupt-Div füllt das gesamte Wrapper-Div aus und behält dabei das durch den Padding-Top-Prozentsatz auf dem Wrapper:after-Pseudoelement angegebene Seitenverhältnis bei.

Durch die Verwendung von CSS können Sie ganz einfach ein Seitenverhältnis für Ihr Div beibehalten und gleichzeitig die Größe responsiv ändern, ohne JavaScript einführen zu müssen.

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!