bootstrap中aspect-ratio不生效主因是父容器未形成块级格式化上下文、存在显式height声明或display值不兼容；需确保容器display为block/inline-block/flex/grid，移除min/max-height，并配合box-sizing: border-box与子元素height: 100%。
直接用 aspect-ratio: 1 / 1 就能实现等比例方形容器，但必须确认 Bootstrap 版本 ≥ 5.1 且浏览器支持该属性（Chrome 88+、Firefox 89+、Safari 15.4+）。低于此版本或需兼容旧浏览器时，得退回到 padding-top 技巧或 JS 补位。
为什么 aspect-ratio 在 Bootstrap 中有时不生效
常见现象是容器高度塌陷、内容溢出或完全没反应。根本原因不是 Bootstrap 干预了该属性，而是它被套在了弹性布局或浮动残留结构里，导致父容器未形成「块级格式化上下文」或未设置 height: auto。
-
aspect-ratio要求元素 display 值为block、inline-block、flex、grid等（不能是table或absolute定位后脱离流） - Bootstrap 的
.col-*默认是 flex item，本身没问题；但如果父.row被手动加了display: block，就会破坏计算上下文 - 某些自定义 CSS 重置了
box-sizing或设置了min-height: 0，也会干扰比例计算
在 .col-md-6 里让子容器严格为正方形
关键不是“怎么写 aspect-ratio”，而是怎么避免它被父级约束覆盖。推荐组合写法：
.square-box {
width: 100%;
aspect-ratio: 1 / 1;
box-sizing: border-box;
}
- 务必去掉所有显式
height声明（包括min-height、max-height），否则会覆盖aspect-ratio - 如果容器内有图片或文字，默认可能撑高，需对子元素设
height: 100%或object-fit: cover - 在
.row.g-3下使用时，gutter 不影响aspect-ratio计算——因为 gutter 是靠.row的 padding 实现的，子.col宽度仍是 100% 减去 gutter 分摊值
兼容性 fallback：不用 JS 怎么保底
当目标环境含 IE11 或老版 Safari（aspect-ratio 无效，此时用经典的 padding-top 百分比技巧更可靠：
.square-box-fallback {
position: relative;
width: 100%;
}
.square-box-fallback::before {
content: "";
display: block;
padding-top: 100%; /* 高度 = 宽度 × 100% */
}
.square-box-fallback > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
- 这个方案在所有现代浏览器和 IE9+ 都能工作，且不依赖 JS
- 注意：若容器内需响应式文字大小，得额外给
font-size设相对单位（如rem），否则文字不会随容器缩放 - 不要和
aspect-ratio同时写在一个选择器里——旧浏览器会忽略整条规则，新浏览器则优先用aspect-ratio
真正容易被忽略的点是：Bootstrap 的 .container 和 .row 自带的 padding/margin 会间接压缩可用宽度，导致你算出来的 100% 不等于视觉上的“填满列”。调试时先临时加 outline: 1px solid red 看真实边界，比盯着文档猜更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
