如何用CSS基于百分比宽度实现全设备自适应正方形？

你当前的代码无法生成正方形，核心问题是：height: auto不会基于元素宽度计算高度，而CSS中百分比高度是相对于父元素高度来计算的——如果父元素（默认是html/body）没有明确设置高度，height: auto只会根据元素内容撑开高度，没法和宽度形成1:1的比例。

下面提供两种实用解决方案：

方案1：利用padding百分比特性（兼容全浏览器） #

CSS里的padding百分比值是相对于元素自身宽度计算的，因此可以用padding-top或padding-bottom代替高度来实现正方形，再通过内部绝对定位容器承载内容，避免内容撑开额外高度。

代码示例：

.square {
  position: absolute;
  top: 0;
  left: 0;
  width: 5%;
  padding-top: 5%; /* 与宽度百分比一致，实现1:1比例 */
  border: 1px solid #000;
  box-sizing: border-box; /* 防止边框扩大元素总尺寸，保证正方形比例 */
}
/* 用于承载内容的内部容器 */
.square__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  /* 可选：让内容垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

对应HTML结构：

<div class="square">
  <div class="square__content">这里放内容</div>
</div>

方案2：使用aspect-ratio属性（现代浏览器优先推荐） #

CSS原生的aspect-ratio属性可以直接指定元素宽高比，设置为1/1就能轻松实现正方形，语法简洁且无需额外嵌套。

代码示例：

.square {
  position: absolute;
  top: 0;
  left: 0;
  width: 5%;
  aspect-ratio: 1/1; /* 强制宽高比1:1 */
  border: 1px solid #000;
  text-align: center;
  /* 可选：内容垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

注意事项 #

• 方案1中box-sizing: border-box必须添加，否则边框会额外增加元素的总宽度/高度，破坏正方形比例。
• 方案2的aspect-ratio支持Chrome 88+、Firefox 89+、Safari 15.4+，如果需要兼容老旧浏览器，优先选择方案1。

内容的提问来源于stack exchange，提问作者user20171024