最简方案是直接用 aspect-ratio: 1 / 1，但需 @supports 降级；老 ios safari（15.4 前）不支持，须用 padding-bottom + position: absolute 兜底，且父容器需设 width、height: 0，子元素绝对定位填满并 display: block 防间隙。
直接用 aspect-ratio: 1 / 1 是最简方案，但必须加 @supports 降级；老 iOS Safari（15.4 之前）不认它，得靠 padding-bottom + position: absolute 兜底。
为什么 aspect-ratio: 1 / 1 不能单独用
这个属性在 Chrome 88+、Firefox 89+、Safari 15.4+ 才生效。国内大量微信 WebView、钉钉内嵌页仍跑在 iOS 15.2 或更早版本上，aspect-ratio 会被完全忽略——不是报错，是静默失效，卡片直接塌成一条线或按内容撑开。
- 写了
aspect-ratio却没设width，元素可能宽度为 0（尤其在 Flex/Grid 子项里） - 长文本或未约束的
<img>会撑破容器，必须额外加overflow: hidden或max-height - 在
display: grid的auto-fit列中，偶尔因渲染时机导致短暂比例错位
padding-bottom 方案怎么写才不翻车
核心是：父容器用 padding-bottom 撑高，子内容用绝对定位填满。漏掉任一环都会溢出或空白。
- 父容器必须设
width（比如width: 100%或width: 30vw），否则百分比padding-bottom按 0 算 - 父容器必须设
height: 0，否则padding-bottom是加在原有高度上，整体变高 - 子元素（如
<img>）必须设position: absolute; top: 0; left: 0; width: 100%; height: 100% -
<img>要加display: block，否则默认 inline 会在底部留空白间隙
最小可用结构：
.card-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
}
.card-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
怎么防大屏下正方形过大或横竖屏切换抖动
只靠 aspect-ratio 或 padding-bottom 都无法限制最大尺寸。桌面端全宽时，正方形可能达到 1600×1600px，既浪费带宽又破坏布局。
- 用
clamp()控制宽度上限：width: clamp(200px, 50vw, 400px)—— 小屏取 200px，中屏随视口缩放，大屏锁死 400px - 避免纯
vw（如width: 30vw），横屏切竖屏时数值突变，容易引起重排抖动 - 图片 HTML 中别写
width/height属性，否则加载前占位尺寸和加载后不一致，造成视觉跳动
真正麻烦的不是写法，而是混合场景：Grid 布局里套正方形、配合懒加载图片、还要兼容微信旧内核——这时候 @supports (aspect-ratio: 1 / 1) 包一层 aspect-ratio，再在外面写 padding-bottom 方案，才是实际项目里最省心的组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
