如何使用 CSS 調整大小時保持 Div 的長寬比？

如何響應式更改Div 大小並保持寬高比

調整圖像大小時，可以透過設定圖像的寬度或寬度來輕鬆保持其寬高比高度以百分比表示。然而，對非圖像元素實現相同的效果似乎具有挑戰性。我們可以使用百分比連結 div 的寬度和高度，以在調整大小時保持寬高比嗎？

解

當然可以！ CSS 為這個問題提供了一個巧妙的解決方案。雖然看起來可能違反直覺，但填充頂部百分比實際上與包含區塊的寬度有關。這允許我們根據指定的寬度建立動態高度。

考慮以下CSS 程式碼：

.wrapper {
  width: 50%; /* Set the desired width */
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%; /* 16:9 aspect ratio */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue;
  color: white;
}

在HTML 中，我們將使用要調整大小的div 進行包裝「wrapper」類別：

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>

此CSS在「wrapper」div 中建立一個偽元素(::after)。透過將其 padding-top 設定為包裝器寬度的百分比，我們可以有效地修復其中 div 的縱橫比。當包裝器調整大小時，偽元素也會調整大小，確保所包含的 div（“main”）始終保持所需的寬高比。

以上是如何使用 CSS 調整大小時保持 Div 的長寬比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！