最稳定兼容的纯CSS自适应正方形方案是利用padding-top百分比（如100%）相对于父宽计算的特性，配合position: relative与absolute定位内容；aspect-ratio为现代简洁方案但旧版Safari不支持。
用 padding-top 百分比实现宽高相等的容器
纯 CSS 实现自适应正方形，最稳定、兼容性最好的方式是利用 padding-top 的百分比值相对于父容器宽度计算这一特性。只要让内边距撑开高度，再把内容区域绝对定位进去，就能保证无论父容器多宽，子容器始终是正方形。
常见错误是直接写 height: 100% —— 这依赖父容器有明确高度，而响应式场景下父容器高度往往未知，必然失效。
- 父容器需设
width（可以是100%、max-width或具体值），且不能是display: inline类型 - 子容器设
padding-top: 100%（或其它比例，如56.25%是 16:9） - 子容器设
position: relative，内部内容用position: absolute; top: 0; left: 0; width: 100%; height: 100% - 若需背景图填充，推荐用
background-size: cover而非img标签，避免拉伸失真
.square {
width: 100%;
padding-top: 100%; /* 高度 = 宽度 */
position: relative;
background: #eee;
}
.square-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}用 aspect-ratio（现代方案，但注意兼容性）
aspect-ratio 是 CSS 新增属性，语法简洁：直接写 aspect-ratio: 1 / 1 就能声明正方形。但它在旧版 Safari（
它和 padding-top 方案的关键区别在于：前者是真正控制盒模型尺寸，后者是“骗”出来的高度。这意味着 aspect-ratio 下的元素可正常参与 Flex/Grid 布局流，而 padding-top 方案中内容需绝对定位，脱离文档流。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Chrome 88+、Firefox 89+、Edge 88+、Safari 15.4+ 支持
- 可与
width或max-width组合使用，但不能和height同时指定（会冲突） - 不支持 IE，也不支持 Android 4.4–11 的系统 WebView（即使 Chrome 浏览器内核新，WebView 可能仍旧）
- 搭配
@supports (aspect-ratio: 1/1)可安全降级到padding-top方案
用 vw 单位强制正方形（适合全屏场景）
当正方形需要铺满视口某一边（比如全屏轮播图、封面卡片），可用 vw 单位直接绑定视口宽度。例如 width: 80vw; height: 80vw，这样宽高永远一致。
但要注意：这个方案完全脱离父容器约束，一旦父容器有 max-width 或内边距，就容易溢出或错位。它本质是“固定比例缩放”，不是“响应式继承”，所以只适用于明确以视口为基准的场景。
- 适合全屏 Banner、模态弹窗中的图标容器、固定比例的视频占位符
- 慎用于嵌套在
container或grid中的卡片——此时应优先用padding-top或aspect-ratio - 在横竖屏切换频繁的移动端，
vw始终按视口宽度算，竖屏时可能过窄，需配合min-height补救
图片类正方形容器的额外处理
如果正方形里要放 <img>，单纯设 width: 100%; height: 100% 会导致图片被拉伸变形。必须控制其缩放行为。
最容易踩的坑是以为 object-fit: cover 就万事大吉——它确实能裁剪填充，但若图片原始宽高比和容器不一致，边缘内容会被切掉，设计稿可能因此漏关键信息。
- 首选
background-image+background-size: cover，可控性强，且天然适配padding-top方案 - 若必须用
<img>，确保父容器设overflow: hidden，再给img加width: 100%; height: 100%; object-fit: cover - 不要对
img设vertical-align: middle等行内对齐——它在块级正方形容器中无效，反而引入基线间隙 - 服务端可配合生成 1:1 比例的缩略图，从根本上避免前端裁剪风险
实际项目中，padding-top 方案仍是主力，尤其在需要兼容微信内置浏览器（X5 内核老旧）或政企客户定制 WebView 时。别为了语法简洁强行上 aspect-ratio，除非你清楚知道哪些设备会挂掉。
