Wie kann ich das Seitenverhältnis für Divs beibehalten, indem ich nur CSS verwende?

Beibehaltung des Seitenverhältnisses für Div-Dimensionen mit Responsive Resizing

Einer der entscheidenden Aspekte von Responsive Webdesign besteht darin, sicherzustellen, dass sich Elemente nahtlos an unterschiedliche anpassen Bildschirmgrößen unter Beibehaltung ihrer intrinsischen Eigenschaften. Stellen Sie sich vor, Sie möchten ein div-Element erstellen, das einem bestimmten Seitenverhältnis entspricht, ähnlich dem Verhalten eines Bildes, wenn es mit prozentualen Breiten oder Höhen angegeben wird. Ist es möglich, dies ohne JavaScript zu erreichen?

Die Antwort ist ein klares Ja. Sie können die Leistungsfähigkeit von reinem CSS nutzen, um diesen Effekt zu erzielen, wie das folgende Beispiel zeigt:

.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 Snippet dient das „.wrapper“-Div mit seiner Breite als Container auf 50 % eingestellt (Sie können dies auf Ihre gewünschte Größe anpassen). Der Schlüsselaspekt liegt im Pseudoelement „.wrapper:after“. Durch Einstellen der Polsterung oben auf 56,25 %, was dem Kehrwert des gewünschten Seitenverhältnisses (in diesem Fall 16:9) entspricht, wird die Höhe des Behälters automatisch angepasst, um die richtigen Proportionen beizubehalten.

Das „ .main“ div ist absolut innerhalb von „.wrapper“ positioniert und füllt den gesamten Bereich aus. Zur besseren Sichtbarkeit werden eine solide Hintergrundfarbe und kontrastierender Text angezeigt.

Mit dieser Technik können Sie reaktionsfähige Divs erstellen, die ihr Seitenverhältnis mühelos beibehalten und so eine konsistente visuelle Ästhetik auf verschiedenen Geräten und Bildschirmgrößen gewährleisten.

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