使用css保持一定寬高比例

文章出處：http://www.tuicool.com/articles/zQfQzur

需求描述：移動端實現橫跨頁面半圓。（類似問題，實現4x4的正方形網格）

簡化問題，我們可以理解爲實現一個高度和寬度比爲1:2的塊。

需要解決問題：

1，高度和寬度按照一定比例。

2，外容器高度和寬度不確定。

3，儘量不使用圖片和腳本替代。

4，兼容移動端。

編寫html

<div class = "semicircle"></div>

思考一，使用height：100% ，

body{
  margin:0;
  width: 100%;
  background: lightblue;
}

.semicircle {
  width: 100%;
  height: 100%;
  border-top:5px solid #fff;
  border-radius: 100%;
}

存在問題，height 的百分比是根據父容器計算的，不是當前容器，根本滿足不了我們的需求。效果如下：

父容器body的高度百分比爲其子容器所填充的高度關聯，即便設置body高度100%，由於子容器即semicircle所填充的實際高度爲邊界的5，無法將父容器“全部撐開”，因此無法通過設定父容器的高度爲百分比指定寬高按照一定比例的容器。

思考二，設定padding-top或padding-bottom爲100%

The percentage is calculated with respect to the widthof the generated box's containing block [...] (source:  w3.org , emphasis mine)

百分比寬度的計算與所生成盒子的包含塊寬度有關。padding-top、padding-bottom的百分比是根據父容器的 width （寬度）計算的，而不是 height （高度）。其他比例實現對照表 

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

body{
  margin:0;
  width: 100%;
  background: lightblue;
}
.semicircle {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-top:5px solid #fff;
  border-radius: 100%;
}

思考三，使用vw單元

使用vw單元設定元素高度和寬度，vm的大小是通過viewport的寬度設定的，因此可以通過該方法保持容器按照一定比例顯示。一單位的vw等於百分之一的viewport寬度，即100vw等於100%viewport寬度。

body{
  margin:0;
  width: 100%;
  background: lightblue;
}
.semicircle {
   width: 100vw;
    height:100vw;
  border-top:5px solid #fff;
  border-radius: 100%;
}

對照表

aspect ratio  |  multiply width by
-----------------------------------
     1:1      |         1
     1:3      |         3
     4:3      |        0.75
    16:9      |       0.5625

思考四，使用僞元素和inline-block佈局

body {
  width: 100%;
  font-size: 0;
  text-align: center;
  background: lightblue;
}
.semicircle {
  border-top:5px solid #fff;
  border-radius: 100%;
}
.semicircle:before {
  content:"";
  display: inline-block;
  padding-bottom: 100%;
}

雖然代碼有點複雜，但是靈活性強，可以實現更多類似的效果。

當需求改成實現一個橫跨屏幕80%的寬度的半圓，我們只需要在.semicircle中添加屬性width:80%;，順便也把容器居中實現了。

該方法的原理很清晰：

參考思考一，無法通過高度100%來擴充外容器高度，那麼可以通過僞元素，插入一個高度和寬度一致的元素，將容器撐開成一比一高度的容器。注意，該方法實現半圓，實際需要寬高爲一比一的容器，即佔用空間爲上述方法的兩倍。

設置:before元素邊界，解析原理：

思考五，

使用圖片，兼容低檔次移動設備。

.semicircler img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

使用腳本，css更加簡潔明瞭，目標清晰。

div.style.height=div.offsetWidth+"px";

對於實現2*2正方形網格

/*------main code-------*/
body {
  width: 100%;
  margin:0;
  text-align: center;
}
div{
  display: inline-block;
  width: 50%;
  background: lightblue;
  font-size: 12px;
  position: relative;
  vertical-align: middle;
}
div:before {
  content:"";
  display: inline-block;
  padding-bottom: 100%;
  vertical-align: middle;
}
/*------other code-------*/
div:nth-child(2),div:nth-child(3){
  background: pink;
}
span {
  display: inline-block;
  vertical-align: middle;
  font-size: 6em;
  color: #fff;
}