如何僅使用 CSS 來響應式地維護 Div 的長寬比？

如何透過響應式調整大小來保持Div 寬高比

雖然CSS 允許影像使用基於百分比的寬度或高度來保持其寬高比，但相同的技術可能不會似乎直接適用於其他元素。但是，可以使用純 CSS 來保持 div 的縱橫比。

解：

利用 padding-top 百分比相對於包含內容的事實區塊的寬度。透過將其與嵌套 div 結構相結合，您可以建立長寬比鎖定元素。

範例：

.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>

在此範例中， .wrapper div 的寬度為 50%。加入偽元素 (.wrapper:after) 來決定縱橫比，在本例中為 16:9。嵌套的 .main div 填滿整個 .wrapper div，確保在調整 .wrapper div 大小時內容保持指定的寬高比。

以上是如何僅使用 CSS 來響應式地維護 Div 的長寬比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！