css 创建自适应正方形

现在有这样的一个需求：一个九宫格布局。
在这样的情况下，每列放置三张图片。我们可以利用flex,以及定位来实现这个九宫格的布局。
现在有7个子盒子，其结构都为：

现在将这7个盒子都放置在一个父盒子中

对父级容器进行flex布局，然后对每个盒子设置固定的宽高即可初步实现布局。

对于每个子盒子，宽度利用百分比是可以实现自适应的，但是高度设置为百分比则是行不通的。那么如何让子盒子呈现自适应的正方形呢。我们可以利用padding值将盒子撑开，然后再利用绝对定位将图片定位到子盒子的位置上。