aspect-ratio: 1/1 失效主因是缺乏确定宽度基准，需确保父容器有明确宽度、子项为 block/inline-block/flex/grid 显示模式、清除 height/min-height 等显式尺寸声明，并配合 width: 100% 触发高度自动计算。
aspect-ratio 是目前实现响应式等比例方块最直接的方式，但不是写上就生效——它需要满足几个关键前提，否则方块会塌陷、拉伸或完全不可见。
为什么 aspect-ratio: 1 / 1 没效果？常见失效场景
最常遇到的是“写了但没高度”，本质是浏览器无法推导出高度所需的基础尺寸。以下情况都会导致失效：
- 父容器宽度为
0（比如 flex 项未设flex-basis，或 grid 项未分配列宽） - 方块本身是
inline元素（如默认的span或img），必须显式设display: block或inline-block - 同时设置了
height（哪怕height: auto）——aspect-ratio只在**一个轴有确定尺寸时才自动计算另一轴** - 用在
img或video上却忽略它们自带固有宽高比，且未配合width: 100%和height: auto
怎么让 aspect-ratio: 1 / 1 真正生效？实操要点
核心逻辑：给它一个可测量的宽度来源，再让它算高度。
- 容器必须有明确宽度上下文：比如
width: 100%、flex: 1、grid-column: span 2，或 Tailwind 的w-full/flex-1 - 确保显示模式正确：
display: block（对div默认成立），但img需加display: block才能响应aspect-ratio - 内容填充要配合：
img用width: 100%; height: auto; object-fit: cover；文字卡片用display: flex; align-items: center; justify-content: center - 避免干扰项：不要设
min-height、max-height或padding-bottom在同一元素上，它们会与比例计算冲突
在 Flex 布局里做等比方块画廊，为什么还塌缩？
Flex 默认的 align-items: stretch 会让子项被垂直撑满，覆盖 aspect-ratio 的高度计算；而 flex-shrink: 1（默认）又可能把方块压成一条线。
- 必须加
align-items: flex-start到 flex 容器上 - 每个方块加
min-width: 0（尤其嵌套多层 flex 时，防止 shrink 过度） - 宽度不能靠百分比粗略减 gap，要用精确计算：
width: calc((100% - 3vmin) / 4)（4 列，3 个间隙） - gap 必须设在容器上，且 width 计算中显式扣除——Flex 不会自动从百分比里“省出” gap 空间
兼容老浏览器（比如 Safari
不能混用 aspect-ratio 和 padding-top 在同一个声明块里——顺序错或共存会导致旧浏览器解析异常，或新浏览器忽略 fallback。
- 用
@supports (aspect-ratio: 1 / 1)包住现代写法，外面写降级方案 - fallback 必须用
position: relative+padding-top: 100%+ 子元素position: absolute，不能用padding-bottom（在 flex/grid 中不可靠） - 微信 iOS 客户端（v8.0.4x）识别
aspect-ratio但渲染异常，建议 UA 判断后统一走 padding 方案 - 别指望 PostCSS 插件自动处理
aspect-ratio: auto 1 / 1这类写法，它不支持auto关键字
真正容易被忽略的点，是检查父容器宽度是否“真实落地”——哪怕只漏了一个 flex: 1 或 width: 100%，aspect-ratio 就会静默失效，连 warning 都不报。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
