自适应正方形

auto-square.css

/* 方法一：1个vw 单位，代表1%视窗单位，相对的还有 hv ，代表一个视窗高度 */
.square {
  width : 25%;
  height : 25vw;
}

/* 方法二：height 为0，使用padding撑开高度，padding的百分比根据所在block的宽度来计算的 */
.square {
  width : 25%;
  height : 0;
  padding : 12.5% 0;
}