如何不使用JavaScript仅通过CSS基于父元素宽度实现正方形效果

核心思路 #

只要让元素的高度始终和自身宽度（取值参考父元素宽度）保持1:1比例，就能得到正方形效果，以下是两种可直接复用的实现方式：

方案1：原生aspect-ratio实现（优先推荐） #

这是现代CSS原生提供的宽高比属性，写法最简单，不需要额外hack，所有主流现代浏览器都已支持：

1. 替换原有代码里的固定宽度width: 150px，改成基于父元素的相对值，比如width: 100%代表宽度等于父元素宽度，也可以按需求写width: 30%这类百分比值
2. 加aspect-ratio: 1 / 1强制元素宽高比为1:1，高度会自动跟随宽度计算，形成正方形
3. 建议加上box-sizing: border-box，避免边框、内边距把元素撑变形

完整可运行代码：

button {
  /* 宽度按父元素比例调整，示例为撑满父元素宽度 */
  width: 100%;
  /* 核心：宽高比1:1 生成正方形 */
  aspect-ratio: 1 / 1;
  background: red;
  color: white;
  outline: 0;
  box-sizing: border-box;
  /* 可选：让按钮文字垂直水平居中，视觉效果更好 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
}

<!-- HTML无需额外修改，直接用原有结构即可 -->
<button>Button</button>

方案2：padding兼容方案（适配极老旧浏览器） #

如果需要兼容IE11等不支持aspect-ratio的老旧浏览器，可以利用「百分比值的padding-top/padding-bottom参考的是元素自身宽度」的特性实现正方形，缺点是需要额外处理内容定位：

button {
  /* 宽度按父元素比例调整 */
  width: 100%;
  position: relative;
  /* 高度靠内边距撑开，因此自身高度设为0 */
  height: 0;
  /* padding-top百分比等于宽度百分比，100%即和宽度等长，形成正方形 */
  padding-top: 100%;
  background: red;
  color: white;
  outline: 0;
  border: none;
  box-sizing: border-box;
}
/* 把按钮内容定位到正方形中心 */
button span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

对应的HTML需要把按钮文本包一层标签方便定位：

<button><span>Button</span></button>

注意：两种方案都要求父元素有可计算的明确宽度（比如父元素是块级元素、设置了固定/百分比宽度、在flex/grid布局中分配了确定宽度），否则子元素的宽度没有参考基准，正方形效果无法生效。

内容的提问来源于stack exchange，提问作者Md. Abu Sayed