问题

如何用 CSS 实现一个固定宽高比为 1:1 的元素？

---

方法一

使用 aspect-ratio （英/ˈæspekt reɪʃiəʊ/）属性（现代标准方案）。

.square {
  width: 200px;
  aspect-ratio: 1 / 1; /* 或简写为 aspect-ratio: 1; */
}

说明：

• aspect-ratio: 1 / 1 表示宽高比为 1:1，浏览器会根据设定的宽度自动计算高度。
• 此属性自 Chrome 88、Firefox 89、Safari 15 起得到广泛支持，适用于绝大多数现代 Web 项目。
• 无需额外嵌套或 hack，语义清晰、代码简洁。

---

方法二

使用 padding-top 百分比技巧。

<div class="square-container">
  <div class="square-content">内容</div>
</div>

.square-container {
  width: 200px;
  position: relative;
}

.square-container::before {
  content: '';
  display: block;
  padding-top: 100%; /* 相对于父元素宽度的 100% */
}

.square-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

说明：

• 利用 padding-top 的百分比值始终相对于父容器的宽度计算，从而撑开容器高度。
• 适用于需要兼容旧版浏览器（如 IE11）的场景，但结构略复杂。
• 内容需通过绝对定位放入，避免影响 padding 产生的占位。

---

建议

• 优先使用 aspect-ratio，代码更简洁、可维护性更高。
• 若项目需支持较老浏览器，再考虑 padding hack 方案。
• 避免使用 JavaScript 动态计算高度，除非有特殊交互需求。