元素宽度自适应，宽高保持等比缩放

实现一

• 百分比/vw 设置宽度（css 中的单位）
• 使用 vw 设置高度

.square {
  width: 30%;
  /* width: 30vw */
  heigth: 30vw;
  background: red;
}

实现二

• 百分比/vw 设置宽度
• 使用 padding 将高度撑开（padding 值为百分比时，是相对于父元素的宽度）

若向容器添加内容，内容会占据一定高度，为了解决这个问题，需要设置 height: 0

.square{
  width:30%;
  height:0;
  padding-bottom:30%;
  background:red;
}

因为 content 没有高度，所以 max-height 将不会生效

实现三

• 百分比/vw 设置宽度
• 通过伪元素的 margin/padding 撑开容器（margin 值为百分比时，是相对于父元素的宽度）

由于 margin 塌陷，需要在父元素上触发 BFC：设置 overflow-hidden

.square{
    width:30%;
    overflow:hidden;
    background:red;
    /* 这样 max-height 就生效了 */
    max-height: 100px
}
.square:after{
    content:'';
    display:block;
    margin-top:100%;
}

若使用 padding 撑开父元素，则不需要触发 BFC

.square{
    width:30%;
    overflow:hidden;
    background:red;
    max-height: 100px
}
.square:after{
    content:'';
    display:block;
    padding-top:100%;
}

注意：此方法虽然能使 max-height 生效，但是容器中有内容时，会额外占据一定高度