position: relative
width: 100%
height: 0
padding-bottom: 30%
}
.c-wp{
position: absolute
left: 0
top: 0
width: 100%
height: 100%
background-color: red}
<div class="a-wp">
<div class="c-wp"></div>
</div>
此时调整.a-wp的padding-bottom就是调整宽高比例。例子中的位10:3
比如宽度为父元素的50%加上5像素：width:calc(50% + 5px)
要注意加号（或减号）两边一定要加上空格！
再比如宽度是父元素的三分之一再减去3像素：
width:calc((100% / 3) - 3px)
乘号（或除号）两边可以不加空格，但建议最好加上！
此外必须注意这种方法属于css3标准，不是什么浏览器都适用的哦！
