css实现高度height随宽度width变化保持比例不变

方法1:
将width设置为百分比，height设置为0，padding-bottom设置为百分比。

     一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，padding-bottom 也是如此。
    使用 padding-bottom 代替 height 来实现高度与宽度成比例的效果，将 padding-bottom 设置为想要实现的 height 的值，同时将其 height 设置为 0 以使元素的“高度”等于 padding-bottom 的值，从而实现需要的效果。

CSS代码如下：

div {
  width: 20%;
  padding-bottom: 20%;
  height: 0;
}

方法2:
用CSS的vw或者vh为单位。

vw:相对于视框的宽度：视框宽度是100vw
vh:相对于视框的高度：视框高度是100vh

CSS代码如下：

div {
  width: 20vh;
  height: 20vh;
}

参考文章：
css3 vh单位使用
css实现高度height随宽度width变化保持比例不变