使用 CSS 響應式調整 Div 大小時如何保持寬高比？

響應式地改變Div 尺寸，同時保留縱橫比

處理影像時，對其寬度或高度應用百分比值可保持其縱橫比當它們膨脹或收縮時。然而，用其他元素複製這種行為可能具有挑戰性。

幸運的是，CSS 提供了一種使用百分比連結元素的寬度和高度的解決方案，確保其縱橫比保持一致。

使用 CSS 的解決方案

這可以透過令人驚訝的事實來實現，即 padding-top 屬性的百分比值是相對於包含區塊的寬度。考慮以下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;
}

HTML 範例：

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

在此範例中，「.wrapper」div 將寬度設為50% (或任何所需的百分比）並為內部“.main”div 建立相對上下文。

“.wrapper:after”偽元素使用 padding-top 屬性來建立 56.25% 的填充率。此比例代表 16:9 的寬高比，確保「.main」div 始終保持該寬高比。

最後，「.main」div 填滿整個「.wrapper」容器，同時保留其寬高比比例並展示其深天藍色背景和白色文字。

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