固定div_CSS 利用padding百分比，实现固定宽高比

-*-  没事整点小知识  -*-

通常我们在为元素指定padding值时，使用px、rem或em等单位比较多。px是指像素，是绝对值；rem与em分别是相对于html与当前元素的字体大小，是相对值。这几个单位比较好理解，但padding值还可以使用百分比的形式，如

.rato {
      padding: 25%;}

百分比当然也是相对值，重点是它相对于什么？padding值使用百分比形式时，实际上是相对于该元素 父容器的宽度。这一点很有意思，也很重要，无论是左右padding(padding-left, padding-right)还是上下padding(padding-top, padding-bottom)，其百分比都是相对于父容器的宽度。这样，元素的宽度与高度就可以通过父容器的宽度关联起来。现在要实现一个组件，它的宽度不固定(会根据用户的操作或者是相关数据等动态变化)，但要求高度与宽度的比例不变。HTML结构

class="parent"> <div class="ratio">    <div cl