使用css保持一定寬高比例

需求描述：移動端實現橫跨頁面半圓。（類似問題，實現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 width of 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;
        }