寬高等比縮放

容器寬高等比，就是根據容器的寬度，按照寬高比例自動計算出容器的大小。並且讓圖片，視頻之類能自適應容器。
實現方式：垂直方向的padding

基於容器的width給padding一個百分比。主要的原理是基於元素的padding-top或padding-bottom是根據元素的width進行計算的。

假設你有一個div容器，它的寬度是400px，高度為200px。這個時候借助padding-top或者padding-bottom的值為50%。

根據容器的寬度和padding就可以計算出容器div的高度是200px。 

1.HTML結構

<div class="container"> 
    <div class="content" data-ratio="16:9">
        <div class="center">
            <input type="text" placeholder="用戶名">
            <input type="text" placeholder="密碼">
        </div>
    </div> 
</div>

上面的HTML結構中,只要的核心內容是content和center。外面的container主要是鋪滿整個頁面的，她沒有進行寬高的等比

<div class="content" data-ratio="16:9"> 

　　<div class="center"></div> 

  </div>

詳解：1.content里面必須包含一個子標簽center

           2.所有其他內容放在子標簽內，不能直接放在content中

2.CSS代碼

 .container{
        height: 100%;
        width: 100%;
        background: url("imgs/login_bg.png") center no-repeat;
        background-size: cover;
        padding: 4.93% 0;
   }
    .content{
        position: relative;
        margin: 0 auto;
        height: 0;
        width: 30%;
        padding-top: calc(30% * 512 / 428);   /*//自身高度/自身寬度*/
        background: url("imgs/account_bg.png") center no-repeat;
        background-size: contain;
        text-align: center;
    }
    .content>*{
        position: absolute; 
        left: 0; 
        top: 0;
        width: 100%;
        height: 100%
        
    }
    .center{
        padding: 40% 0;

    }
    .content input{
       padding: 0;
       margin: 0;
       width: 50%;    /*自身寬度比上父親寬度*/
    　　height: 6.25%;   /*自身高度比上父親高度*/
       padding-left: 10%;    /*自身寬度比上父親寬度*/
    　　margin-top: 10%;    /*自身高度比上父親寬度*/
    　　color:#fff;
    　　border: none;
    　　border-radius: 2px;
    　　background-color: rgba(255,255,255,0.3);    
    　　margin-bottom: 1.168%
    }

上面的CSS代碼核心部分如下

    .content { 
        position: relative; /*因為容器所有子元素需要絕對定位*/ 
        height: 0; /*容器高度是由padding來控制，盒模型原理告訴你一切*/ 
        width: 100%; 
    } 
    .content[data-ratio="16:9"] { 
        padding-top: cal(200/400)*100%; 
    }  
    /*通過通配符*選擇器，讓其子元素的寬高和容器.content一樣大小 */
    .content > * { 
        position: absolute; 
        left: 0; 
        top: 0; 
        width: 100%;
        height: 100%; 
    } 

詳解：1.容器相對定位，寬度100%，高度為0 ，通過padding-top來顯示高度。padding-top的值是（高度/寬度）*容器的寬度百分比。

           2.通過通配符*選擇器，讓其子元素的寬高和容器.content一樣大小 （center的寬高是100%）

           3.容器里面的內容，涉及到的單位都用px.

              元素的寬（百分比）=自身寬度/容器(父)的寬*100%；

              元素的高（百分比）=自身高度/容器(父)的高*100%；

              padding/margin=自身大小/容器（父）的寬度*100%。(即，無論是上下的間距還是左右的間距都是用自身的值/父的寬度)