如何僅使用 CSS 來保持 Div 的長寬比？

透過響應式調整大小保留Div 尺寸的縱橫比

響應式網頁設計的關鍵方面之一是確保元素無縫適應不同的環境螢幕尺寸，同時保持其固有特徵。想像一下，您想要建立一個遵循特定寬高比的 div 元素，類似於使用百分比寬度或高度指定時圖像的行為。不用 JavaScript 就能完成這個任務是否可行？

答案是肯定的。您可以利用純CSS 的力量來實現此效果，如下例所示：

.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”偽元素。透過將其 padding-top 設定為 56.25%，即所需縱橫比的倒數（本例中為 16:9），容器的高度將自動調整以保持正確的比例。

“ .main” div 絕對位於“.wrapper”內並填滿整個區域。它展示了純色背景色和對比鮮明的文本，以提高可見性。

利用此技術，您可以建立響應式 div，輕鬆保持其縱橫比，確保在各種裝置和螢幕尺寸上保持一致的視覺美感。

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