Bootstrap4中CSS设置width:100%后如何调整高度实现等宽高正方形

问题原因 #

你遇到的问题有两个核心诱因：

1. 绝对定位元素的height: 100%是相对于最近的position不为static的父元素计算的，如果你没有给外层的col-md-2设置position: relative，定位上下文会向上追溯到<html>/<body>，高度自然会延伸到页面底部。
2. 就算你给col-md-2加了定位，因为你的.circle是绝对定位，脱离了正常文档流，父元素col-md-2的高度不会被内部绝对定位元素撑开，默认高度为0，height: 100%也不会得到你想要的正方形效果。

解决方案 #

方案1：padding百分比实现（兼容性最好，支持全版本浏览器） #

padding的百分比取值是相对于元素自身宽度计算的，利用这个特性可以轻松实现固定宽高比的元素：

1. 先给外层col-md-2添加定位上下文：

.col-md-2 {
  position: relative;
}

2. 修改.circle样式，删掉原有的height: 100%，用padding-top: 100%撑起和宽度相等的高度：

.circle{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 100%;
  background: tomato;
}

如果需要在正方形内部添加内容，额外套一层绝对定位的内容容器即可，避免内容撑开padding：

<div class="col-md-2">
  <div class="circle">
    <div class="circle-content">内部内容</div>
  </div>
</div>

对应内容容器样式：

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

方案2：aspect-ratio属性实现（现代浏览器首选，写法最简洁） #

如果不需要兼容IE及2021年之前发布的老版本浏览器，直接用CSS原生的aspect-ratio属性指定宽高比即可：

/* 保留绝对定位的前提下需要先给父元素加定位 */
.col-md-2 {
  position: relative;
}
.circle{
  position: absolute;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: tomato;
}

如果不需要保留绝对定位，直接给.circle添加aspect-ratio: 1 / 1即可，父元素不需要额外加定位属性。

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