如何用纯CSS将正方形适配到矩形中并匹配其高度？

要实现子元素高度占父元素100%、同时宽度等于父元素高度的正方形效果，可借助CSS的aspect-ratio属性完成，这是最简洁的纯CSS方案，完全满足你的需求（无需SVG、JS或固定尺寸）。

实现原理 #

aspect-ratio: 1/1会强制元素保持1:1的宽高比。当给子元素设置height: 100%时，它的高度会完全继承父元素的高度，而aspect-ratio会自动将宽度调整为与高度相等的数值，从而形成完美的正方形。

示例代码 #

<!-- 父元素：响应式矩形 -->
<div style="width: 95vw; height: 100%; border: 2px solid #f00; margin: 0; box-sizing: border-box;">
  <!-- 子元素：高度100%父元素高度的正方形 -->
  <div style="border: 2px solid #0f0; height: 100%; aspect-ratio: 1/1; box-sizing: border-box;">
    I'm a square, 100% of parent's height
  </div>
</div>

旧浏览器兼容方案 #

如果需要兼容不支持aspect-ratio的旧浏览器（如IE），可使用伪元素+padding的替代方案：

<div style="width: 95vw; height: 100%; border: 2px solid #f00; position: relative; box-sizing: border-box;">
  <div style="border: 2px solid #0f0; position: absolute; top: 0; bottom: 0; width: 100%; box-sizing: border-box;">
    <!-- 用padding-top创建1:1比例容器 -->
    <div style="height: 100%;">
      <div style="height: 0; padding-top: 100%;"></div>
    </div>
    <!-- 绝对定位显示内容 -->
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center;">
      I'm a square, 100% of parent's height
    </div>
  </div>
</div>

该方案利用padding-top: 100%构建1:1比例的隐形容器，再通过绝对定位让内容居中显示。

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