在某些特定的場(chǎng)景中，如視頻播放、可視化圖表占位等一些高寬需要固定的比例。如果占位區(qū)間是由固定值確定，那么我們皆大歡喜，但在目前的的應(yīng)用發(fā)展中寬高自適應(yīng)的方式才能滿足我們的需求，那么我們?cè)撊绾芜@種自適應(yīng)的 寬高比布局 呢？

什么是寬高比？

寬高比也稱縱橫比，元素的縱橫比描述了其寬度和高度之間的比例關(guān)系。兩種常見(jiàn)的視頻寬高比為4：3和16：9。要保持div的寬高比，通過(guò)為 padding-top / padding-bottom 添加一個(gè)百分比值。不同的寬高比具有不同的百分比值?；虿捎靡暣皢挝?vw / vh 設(shè)置相應(yīng)高寬。其中一些如下所示：

利用padding-top/bottom適配

在CSS中 margin 與 padding 的百分比值是根據(jù)容器的width來(lái)計(jì)算，利用這一性質(zhì)我們可以通過(guò)設(shè)置 padding-top/bottom 的百分比值實(shí)現(xiàn)。 采用這種方法，需要把容器的height設(shè)置為0，最終容器實(shí)際高度由padding撐出。在此基礎(chǔ)上又可分為 偽元素 與 內(nèi)容絕對(duì)定位 兩種方案。這也是目前最佳的處理方式。具體實(shí)現(xiàn)如下：

Note: 示例均采用2:1的關(guān)系

1、偽元素

適用場(chǎng)景：IE8+ 、現(xiàn)代瀏覽器

優(yōu)點(diǎn): DOM節(jié)點(diǎn)少、可響應(yīng)式、需精確到像素

<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、內(nèi)容絕對(duì)定位

適用場(chǎng)景：IE8+ 、現(xiàn)代瀏覽器 優(yōu)點(diǎn): 可響應(yīng)式、精確到像素

<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

利用視窗單位是一種相對(duì)于屏幕大小的計(jì)算方式，同理我們也也可用用 rem 來(lái)達(dá)到相同的效果。具體實(shí)現(xiàn)與視窗單位一樣。

適用場(chǎng)景：IE10+ 、現(xiàn)代瀏覽器

優(yōu)點(diǎn): DOM節(jié)點(diǎn)少、可響應(yīng)式

<div class="aspect-ratio"></div>

1、固定值

值的計(jì)算可參考文章頭部表格

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

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

2、calc()

利用 calc() 可以動(dòng)態(tài)計(jì)算相應(yīng)值，我們只需要知曉相應(yīng)比值與高寬中一個(gè)值，該方式也可以延用到padding適配中。

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

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

以上兩種方法四種實(shí)現(xiàn)方式可根據(jù)不同場(chǎng)景選用不同的方式。不過(guò)有部分情況下采用padding與偽元素的方式相對(duì)更佳。

結(jié)合居中

在些基礎(chǔ)上，我們可能會(huì)涉及相關(guān)的對(duì)寬高比元素進(jìn)行居中排版，相關(guān)細(xì)節(jié)可參考我上篇文章CSS之居中布局

參考

Aspect Ratio Boxes

Maintain the aspect ratio of a div with CSS

Padding

The-padding

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論