实现元素宽高比例为1：1

overflow: hidden;
width: 50%;
heigth: 0;
padding-bottom: 50%

---

1、如果一个元素的height值为百分比，则其高度是相对于父元素的宽度而言，对于padding-bottom和padding-top也是。

2、计算overflow时，内容区域和padding区域都会计算进去，即使设置了overflow：hidden，padding区域也会显示。

---

综上所述，可以用padding-bottom来代替高度，将height设置为0，实现固定宽高比例

来源：https://www.cnblogs.com/hengruo/p/12162213.html