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

什么是寬高比？

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

利用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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。