• 利用vw来实现：

复制
1.square {
2  width: 10%;
3  height: 10vw;
4  background: tomato;
5}

• 利用元素的margin/padding百分比是相对父元素width的性质来实现：

复制
1.square {
2  width: 20%;
3  height: 0;
4  padding-top: 20%;
5  background: orange;
6}

• 利用子元素的margin-top的值来实现：

复制
1.square {
2  width: 30%;
3  overflow: hidden;
4  background: yellow;
5}
6.square::after {
7  content: '';
8  display: block;
9  margin-top: 100%;
10}