使用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;
        }