純 CSS 實現自適應正方形

在處理移動端頁面時，咱們有時會須要將 banner 圖作成與屏幕等寬的正方形以得到最佳的體驗效果，如 Flipbord 的移動頁面：

那麼應該怎麼使用純 CSS 製做出可以自適應大小的正方形呢？

方案一：CSS3 vw 單位

CSS3 中新增了一組相對於可視區域百分比的長度單位 vw, vh, vmin, vmax。其中 vw 是相對於視口寬度百分比的單位，1vw = 1% viewport width， vh 是相對於視口高度百分比的單位，1vh = 1% viewport height；vmin 是相對當前視口寬高中 較小 的一個的百分比單位，同理 vmax 是相對當前視口寬高中 較大 的一個的百分比單位。該單位瀏覽器兼容性以下：

利用 vw 單位，咱們能夠很方便作出自適應的正方形：

<div class="placeholder"></div>  

.placeholder {
  width: 100%;
  height: 100vw;
}

實現效果

優勢：簡潔方便
缺點：瀏覽器兼容很差

方案二：設置垂直方向的 padding 撐開容器

在 CSS 盒模型中，一個比較容易被忽略的就是 margin, padding 的百分比數值計算。按照規定，margin, padding 的百分比數值是相對 父元素寬度 的寬度計算的。由此能夠發現只需將元素垂直方向的一個 padding 值設定爲與 width 相同的百分比就能夠製做出自適應正方形了：

.placeholder {
  width: 100%;
  padding-bottom: 100%;
}

實現效果

這時一切看起來都很正常，咱們試着給容器內增長內容：

咦？高度怎麼溢出了？咱們來看這時的盒模型：

如圖中所示，內容區域佔據了 38px 的高度。爲了解決這個問題，咱們能夠設置容器的高度爲 0：

.placeholder {
  height: 0;
}

這種方案簡潔明瞭，且兼容性好；可是除了填充內容後會出現問題之外，還有可能碰上 max-height 不收縮：DEMO，因而第三種方案來了：

方案三：利用僞元素的 margin(padding)-top 撐開容器

在方案二中，咱們利用百分比數值的 padding-bottom 屬性撐開容器內部空間，可是這樣作會致使在元素上設置的 max-height 屬性失效：

而失效的緣由是 max-height 屬性只限制於 height，也就是隻會對元素的 content height 起做用。那麼咱們是否是能用一個子元素撐開 content 部分的高度，從而使 max-height 屬性生效呢？咱們來試試：

.placeholder {
  width: 100%;
}

.placeholder:after {
  content: '';
  display: block;
  margin-top: 100%; /* margin 百分比相對父元素寬度計算 */
}

一刷新頁面，啊嘞？怎麼什麼也沒有？

這裏就涉及到 margin collapse 的概念了，因爲容器與僞元素在垂直方向發生了外邊距摺疊，因此咱們想象中的撐開父元素高度並無出現。而應對的方法是在父元素上觸發 BFC：

.placeholder {
  overflow: hidden;
}

注：若使用垂直方向上的 padding 撐開父元素，則不須要觸發 BFC
實現效果

OK，父元素被撐起來了，咱們再試一試設置 max-height：

完美！什麼？你說元素內部添加內容時高度會溢出？來人，把這個叛徒拖出去喂狗！對於這樣的狀況，能夠將內容放到獨立的內容塊中，利用絕對定位消除空間佔用。

結語

以上就是我目前所想到的三種製做自適應正方形的方案，拋去 CSS3 中的視口相對單位，主要利用到 margin, padding 的百分比數值相對父元素寬度的寬度計算得出 來製做寬高相等、且相對視口寬度自適應的正方形。若是需求是製做相對視口高度自適應的正方形，估計就只能使用 vh 單位了吧~

轉自：純 CSS 實現自適應正方形