最直接方案是aspect-ratio: 1 / 1，需Chrome 88+、Firefox 89+、Safari 15.4+支持；老Safari用padding-bottom伪等高+absolute定位；配合clamp()限制尺寸防撑爆，移除img内联宽高避免抖动。
用 aspect-ratio 最直接，但得看浏览器支持
现代 CSS 里，aspect-ratio: 1 / 1 是最干净的解法，它让元素自动维持宽高比，不管父容器怎么缩放，图始终是正方形。不过得注意：Chrome 88+、Firefox 89+、Safari 15.4+ 才原生支持，旧版 Safari（比如 iOS 15.2）会直接忽略——不是错，是不生效。
实操建议：
- 给图片容器（比如
<div class="square-img">）设 <code>aspect-ratio: 1 / 1，再配width: 100%和overflow: hidden - 图片本身用
object-fit: cover防止拉伸变形 - 如果要兼容老 Safari，下面那个 padding-bottom 方案得备着
- 忘了把内容（如
<img alt="CSS如何做自适应屏幕的等高正方形图" >）用position: absolute覆盖进去，结果图被挤到盒子外 - 没设
height: 0，导致 padding 加在原有高度上，整体变高 - 在 Flex/Grid 容器里直接套这个结构，可能触发意外的交叉轴行为
老浏览器 fallback：用 padding-bottom 搞“伪等高”
这是靠父容器的内边距撑出高度，本质是利用块级元素的 padding 百分比值基于宽度计算的特性。100% 的 padding-bottom 就等于宽度，从而形成正方形。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
最小可用结构示例：
.square-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%; /* 关键 */
}
.square-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}用 vw 或 clamp() 控制尺寸上限，防大屏撑爆
只设 aspect-ratio 或 padding-bottom 不够，因为它们都依赖父宽；如果父容器是全屏，那正方形可能大到离谱（比如桌面端宽 1600px，图就变成 1600×1600）。得加限制。
推荐组合写法：
- 用
max-width: clamp(200px, 50vw, 400px)锁定宽度范围，clamp()在小屏取 200px、中屏按视口一半缩放、大屏卡死在 400px - 配合
aspect-ratio，高度自动跟上，不用单独设max-height - 避免只用
vw（比如width: 30vw），它在超宽屏下依然无约束，且横竖屏切换时不如clamp()稳定
图片加载后尺寸抖动？别让 img 自己决定宽高
如果 HTML 里 <img src="x.jpg" style="max-width:90%" style="max-width:90%" alt="CSS如何做自适应屏幕的等高正方形图" >，浏览器会先按这尺寸渲染占位，等图加载完才重绘——尤其在慢网或懒加载下，容易闪一下。这不是 CSS 问题，是资源加载节奏问题。
解决方式很实在：
- 删掉
width/height属性，让 CSS 全权控制尺寸 - 给
img加display: block，防止底部留空白（行内元素默认对齐基线） - 若需预设占位，用
background-image+aspect-ratio更稳，或者用loading="lazy"配合decoding="async"
实际项目里，aspect-ratio + clamp() + 无内联宽高的 img 是当前最轻量也最可靠的组合。老浏览器兜底方案别删，但优先走现代路径——毕竟 Safari 15.4 已经覆盖绝大多数活跃用户了。
