如何在沒有 JavaScript 的情況下保持寬高比？

透過按比例調整寬度來維持縱橫比

在不使用JavaScript 的情況下根據元素的高度維持元素的縱橫比可能維持元素的縱橫比可能是一個挑戰。人們可能會考慮使用 padding-left 作為高度的百分比，但這種方法被證明是無效的。

考慮以下標記：

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

目標是根據框的縱橫比來保持其高度，根據百分比邊距動態變化：

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

幸運的是，存在一個原生CSS 解決方案：縱橫比屬性。此屬性可讓您設定元素的寬度與高度的比率。

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

在此範例中，框的流體高度為 50%，縱橫比為 2:1。當您調整容器大小時，盒子將保持其縱橫比，確保其始終保持比例平衡。

以上是如何在沒有 JavaScript 的情況下保持寬高比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！