css实现宽高比

头条一面就死在了这个问题上，于是在此好好研究一下。

要求：实现一个div,宽度是body的一半，宽高比满足4：3

方法一：

利用将padding-top或padding-bottom设置成百分比，来实现高度满足宽度的某个比例。因为，当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！。采用这种方法，需要把容器的height设置为0。而容器内容的所有元素都需要采用position:absolute，不然子元素内容都将被padding挤出容器（造成内容溢出）。

css:
.div2{
         width:50%;
 /*如果此处没有宽度为body的50%的要求，则可以不要此div，直接相对body即可*/
     }
.div1{
        position:relative;
         width:100%;
         height:0;
         padding-top: 75%;
         background-color: red;
     }
  p{
        position:absolute;
         top:0;
         left:0;
     }
html:
 

width:height = 4:3 ,那么height=width*(3/4)=width*75%。但此时由于宽度并不是全屏，而是body的一半，所以需要在外面再套一个div，使这个div的宽度为body的一半，然后内层div宽度为100%，高度为75%。
也可以不用再外层多套一个div，但就需要再多算一步，w=50% * body，h=(3/4)1/2*body=(3/8) body

.div1{
          position:relative;
          width:50%;
          height:0;
          padding-top: 37.5%;
          background-color: yellow;
     }

方法二：
这个方案采用的是padding和calc()配合在一起使用。其实原理和第一个方案是一样的。只不过在第一个方案中，我们每次都需要对padding的值计算，如果使用calc()可以通过浏览器直接计算出padding的百分比值.

 .div1{
         position:relative;
         width:100%;
         height:0;
         padding-top: calc(100%)75%;
         background-color: red;
       }

方法三： padding & 伪元素
前面的方案都是在.aspectration元素上使用padding值。但在CSS中，还可以使用CSS的伪元素::before或::after来撑开容器。

.div2{
       width:50%;
}
.div1 { 
        position: relative;
      }
.div1:after { 
        content: ""; 
        display: block;
        width: 1px;
        background-color: orange;
        padding-top: 75%;
} 
 p{
        width: 100%;
        height: 100%; 
        top: 0; left: 0; 
    }

方法四： 视窗单位
CSS新特性中提供了一种新的单位vw。了解过这个单位的同学都知道，浏览器100vw表示的就是浏览器的视窗宽度(Viewport)。打个比方说，如果你的浏览器是1334px，那么对就的100vw = 1334px。这个时候也就是说1vw = 13.34px。这里的100vw也对应前面方案中的100%。这样我们就可以把前面的%单位换成vw的单位。打个比方说，16:9对应的就是100vw * 9 / 16 = 56.25vw。这个值可以用在padding-top或者padding-bottom中。但这里演示的不再是padding了，而是把这个值给height。（这里演示的width为100%，50%自行计算一下就好了）

.div1{ 
        width: 100vw;
        height: 75vw; 
    }