CSS之寬高比例佈局

QHan發表於2019-04-08
CSS

在某些特定的場景中，如視訊播放、視覺化圖表佔位等一些高寬需要固定的比例。如果佔位區間是由固定值確定，那麼我們皆大歡喜，但在目前的的應用發展中寬高自適應的方式才能滿足我們的需求，那麼我們該如何這種自適應的寬高比佈局呢？

什麼是寬高比？

寬高比也稱縱橫比，元素的縱橫比描述了其寬度和高度之間的比例關係。兩種常見的視訊寬高比為4：3和16：9。要保持div的寬高比，通過為padding-top/padding-bottom新增一個百分比值。不同的寬高比具有不同的百分比值。或採用視窗單位vw/vh設定相應高寬。其中一些如下所示：

aspect ratio padding-bottom/top value vw/vh(width|height)
16:9 56.25% 100vw | 56.25vw
4:3 75% 100vw | 75vw
3:2 66.66% 100vw | 66.66vw
8:5 62.5% 100vw | 62.5vw
2:1 50% 100vw | 50vw

利用padding-top/bottom適配

在CSS中margin與padding的百分比值是根據容器的width來計算，利用這一性質我們可以通過設定padding-top/bottom的百分比值實現。 採用這種方法，需要把容器的height設定為0，最終容器實際高度由padding撐出。在此基礎上又可分為偽元素與內容絕對定位兩種方案。這也是目前最佳的處理方式。具體實現如下：

Note: 示例均採用2:1的關係

1、偽元素

適用場景：IE8+ 、現代瀏覽器
優點: DOM節點少、可響應式、需精確到畫素

  <div class="aspect-ration"></div>
複製程式碼
  .aspect-ration { background-color: #f00; }
  .aspect-ration::before {
    content: "";
    float: left;
    padding-bottom: 50%;
  }
 .aspect-ration::after {
    clear: both;
    content: "";
    display: table;
  }
複製程式碼

2、內容絕對定位

適用場景：IE8+ 、現代瀏覽器 優點: 可響應式、精確到畫素

  <div class="aspect-ration">
    <div class="content"></div>
  </div>
複製程式碼
.aspect-ratio {
  height: 0;
  overflow: hidden;
  padding-top: 50%;
  background: #f00;
  position: relative;
}
.content {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  /* 或者 */
  /* position: absolute; top: 0; left: 0; width: 100%; height: 100%; */
}
複製程式碼

視窗單位 vw/vh

利用視窗單位是一種相對於螢幕大小的計算方式，同理我們也也可用用rem來達到相同的效果。具體實現與視窗單位一樣。

適用場景：IE10+ 、現代瀏覽器
優點: DOM節點少、可響應式

<div class="aspect-ratio"></div>
複製程式碼

1、固定值

值的計算可參考文章頭部表格

/* vw */
.aspect-ratio{ width: 100vw; height: 50vw; }

/*vh */
.aspect-ratio{ width: 100vh; height: 50vh; }
複製程式碼

2、calc()

利用calc()可以動態計算相應值，我們只需要知曉相應比值與高寬中一個值，該方式也可以延用到padding適配中。

/* vw */
.aspect-ratio{ width: 100vw; height: calc(100vw * 1 / 2); }

/*vh */
.aspect-ratio{ width: 100vh; height: calc(100vw * 1 / 2); }
複製程式碼

以上兩種方法四種實現方式可根據不同場景選用不同的方式。不過有部分情況下采用padding與偽元素的方式相對更佳。

結合居中

在些基礎上，我們可能會涉及相關的對寬高比元素進行居中排版，相關細節可參考我上篇文章 CSS之居中佈局

參考

Aspect Ratio Boxes
Maintain the aspect ratio of a div with CSS
Padding
The-padding

相關文章