宽高等比缩放

容器宽高等比，就是根据容器的宽度，按照宽高比例自动计算出容器的大小。并且让图片，视频之类能自适应容器。
实现方式：垂直方向的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来控制，盒模型原理告诉你一切*/ 
         100%; 
    } 
    .content[data-ratio="16:9"] { 
        padding-top: cal(200/400)*100%; 
    }  
    /*通过通配符*选择器，让其子元素的宽高和容器.content一样大小 */
    .content > * { 
        position: absolute; 
        left: 0; 
        top: 0; 
         100%;
        height: 100%; 
    } 

详解：1.容器相对定位，宽度100%，高度为0 ，通过padding-top来显示高度。padding-top的值是（高度/宽度）*容器的宽度百分比。

           2.通过通配符*选择器，让其子元素的宽高和容器.content一样大小 （center的宽高是100%）

           3.容器里面的内容，涉及到的单位都用px.

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

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

              padding/margin=自身大小/容器（父）的宽度*100%。(即，无论是上下的间距还是左右的间距都是用自身的值/父的宽度)