CSS 自适应正方形

padding 使用百分数值时是根据其包含块的 width 值计算的。

With respect to the width of the containing block.

所以可以利用 height = 0; 并用 padding-bottom = 100%; 撑起一个正方形：

<div class="container">
  <div class="spacer"></div>
  <div class="content">item</div>
</div>

.container {
  position: relative;
  width: 20%;
}

.spacer {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background: orange;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
}

参考资料

• CSSだけで正方形を作る
• padding-CSS MDN