Wie kann ich das Seitenverhältnis ohne JavaScript beibehalten?

Seitenverhältnis mit proportional angepasster Breite beibehalten

Das Seitenverhältnis eines Elements basierend auf seiner Höhe beizubehalten, ohne JavaScript zu verwenden, kann eine Herausforderung sein. Man könnte darüber nachdenken, padding-left als Prozentsatz der Höhe zu verwenden, aber diese Methode erweist sich als unwirksam.

Beachten Sie das folgende Markup:

<code class="html"><div class="box">
  <div class="inner"></div>
</div></code>

Das Ziel besteht darin, das Seitenverhältnis der Box entsprechend beizubehalten auf seine Höhe, die sich dynamisch basierend auf einem prozentualen Spielraum ändert:

<code class="css">.box {
    position: absolute;
    margin-top: 50%;
    bottom: 0;
}
.inner {
    padding-left: 200%;
}</code>

Glücklicherweise gibt es eine native CSS-Lösung: die Eigenschaft „aspect-ratio“. Mit dieser Eigenschaft können Sie das Verhältnis der Breite des Elements zu seiner Höhe festlegen.

<code class="css">.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 /1;
}</code>

In diesem Beispiel hat die Box eine fließende Höhe von 50 % und ein Seitenverhältnis von 2:1. Wenn Sie die Größe des Behälters ändern, behält die Box ihr Seitenverhältnis bei und stellt so sicher, dass die Proportionen immer ausgewogen bleiben.

Das obige ist der detaillierte Inhalt vonWie kann ich das Seitenverhältnis ohne JavaScript beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!