虽然设置的是垂直方向的高度，有意思的是当该值为一个百分比的时候表示的是和本身包含的元素的宽度有关。
换句话就是说， padding-top 和 padding-bottom 的值为百分比时，其实表示的是其元素宽度的百分比。
因此，在容器宽度不确定的情况下(如: 80% , flex: 1 等），保持容器宽高比不变，可以通过设置元素的 padding-top 或 padding-bottom 值。
例如，保持宽高比为16:9：
这个在保持图片的宽高比时非常有用。
css3有两个新单位，vw和vh,vw表示占用父元素宽度的百分比，vh表示父元素高度的百分比，如20vw表示元素宽度为父元素宽度的百分之二十，你设置宽度和高度都为20vw，就能实现正方形的效果。不过有个bug，就是现在浏览器对css3的支持度不是很大，有些浏览器不支持1:1 aspect ratio = 1 / 1 = 1 = padding-top: 100%4:3 aspect ratio = 3 / 4 = 0.75 = padding-top: 75%
3:2 aspect ratio = 2 / 3 = 0.66666 = padding-top: 66.67%
16:9 aspect ratio = 9 / 16 = 0.5625 = padding-top: 56.25%
