实现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高度根据自适应宽度（百分比）调整的效果。
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！