补得很到位,min-height: 0 那条是这套方案真正落地的分水岭——比例写对了但被 flex 的隐式最小尺寸顶破,很多人会误以为是浏览器 bug。
顺着这条再补三个同样容易被忽略的:
一是方向要配对。flex-direction: column 顶的是高度,写 min-height: 0;但如果是 flex-direction: row 里要让一个带比例的盒子收缩,卡的是宽度,得写 min-width: 0。grid 里也一样,看你的比例是在哪个轴上算出来的,别只记一条。
二是 overflow: hidden 的副作用要想清楚。它确实是「比例必须准」时的标准配置,但对内容型卡片(比如带标题描述的推荐位)就是灾难——超出的文字直接消失,用户还找不到。这种场景要么改成内部滚动,要么干脆别锁比例,用 grid-auto-rows 或者固定高度更实在。封面图、视频框这种「本来就是纯视觉容器」的才适合锁死。
三是和 <img> 的另一种配合。给 img 写上 HTML 的 width/height 属性(比如 800/450),现代浏览器会据此自动推导内在比例,再配 width: 100%; height: auto;,既防 CLS 又不用手写 aspect-ratio。跟你说的 auto 16 / 9 是一套思路的两个方向:一个靠 CSS 兜底,一个靠 HTML 语义。
另外补个小坑:aspect-ratio 在 <span> 这类 inline 元素上不生效,得先给它 display: block / inline-block;table、fieldset 上也不可靠。至于降级,用 @supports not (aspect-ratio: 1) 包一层 padding-top 就行,没必要全局回退——现在真需要照顾的老浏览器占比已经很低了。
见习用户






