纯Css实现Div高度根据自适应宽度（百分比）调整

实现Div高度随宽度自动调整，其实主要是通过设置padding参数的百分比值或使用padding-top和padding-bottom属性实现。这样可以根据所给定的比例计算出高度，从而实现Div的高度自适应调整。

具体实现步骤如下：

1. 在CSS中，使用vw/vh改变Div的宽高比

vw/vh指的是视口宽度/高度的百分比，当页面大小发生改变时，宽高比会自动调整。

示例代码：

div {
  width: 50vw;  /*宽度等于视口宽度的50%*/
  height: 30vw;  /*高度等于宽度的30%*/
  background-color: #eee;
}

2. 使用padding实现自适应高度

在CSS中，可以使用padding实现Div高度的自适应调整。例如，如果我们希望Div的高度等于它宽度的一半，可以将padding-bottom设置为50%，同时设置height为0（或者没有设置height属性），如下所示：

div {
  width: 50%; /*宽度为50%*/
  height: 0; /*高度为0*/
  padding-bottom: 50%; /*底部padding为宽度的一半*/
  background: #eee; /*设置背景颜色*/
}

此时，Div的高度会自动根据宽度计算，并且保证高度等于宽度的一半。

另外还可以使用padding-top属性调整Div高度，如下所示：

div {
  width: 50%; /*宽度为50%*/
  height: auto; /*高度自适应*/
  padding-top: 50%; /*顶部padding为宽度的一半*/
  background: #eee; /*设置背景颜色*/
}

这时，Div的高度会自动调整为宽度的一半，但是顶部会有额外的空白部分，可以通过设置box-sizing为border-box来解决。

div {
  width: 50%; /*宽度为50%*/
  height: auto; /*高度自适应*/
  padding-top: 50%; /*顶部padding为宽度的一半*/
  background: #eee; /*设置背景颜色*/
  box-sizing: border-box; /*保证padding不会撑开元素*/
}

以上两种方法都可以实现Div高度根据自适应宽度（百分比）调整的效果。