Kann CSS ein Seitenverhältnis von 1:1 aufrechterhalten, indem es Elementhöhe und -breite dynamisch anpasst?

Höhe und Breite im CSS-Fluid-Layout dynamisch anpassen

In einem Fluid-CSS-Layout können Elemente ihre Größe automatisch an den verfügbaren Platz anpassen . Dies kann eine Herausforderung darstellen, wenn versucht wird, ein bestimmtes Seitenverhältnis wie ein Quadrat oder ein Rechteck beizubehalten.

Frage:

Kann CSS verwendet werden, um die Höhe festzulegen? Ein Element muss die gleiche Breite wie seine Breite haben und ein 1:1-Aspekt beibehalten Verhältnis?

Beispiel:

Betrachten Sie ein Containerelement und ein verschachteltes div-Element mit der folgenden Struktur und Layout:

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS:

div {
  width: 80%;
  height: same-as-width
}

Lösung:

Während es nicht möglich ist, die Höhe festzulegen Um die Breite explizit nur mit CSS anzupassen, kann eine Problemumgehung mithilfe eines Dummy-Elements und einer cleveren Lösung erreicht werden Positionierung.

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}

<div>

Indem wir die Eigenschaft „margin-top“ für das Dummy-Element verwenden und sie auf 75 % festlegen (um einem Seitenverhältnis von 4:3 zu entsprechen), erstellen wir eine Referenz für die Höhe. Das Element wird dann absolut innerhalb dieser Referenzfläche positioniert, sodass sich eine Höhe ergibt, die seiner Breite entspricht.

Das obige ist der detaillierte Inhalt vonKann CSS ein Seitenverhältnis von 1:1 aufrechterhalten, indem es Elementhöhe und -breite dynamisch anpasst?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!