最直接方案是aspect-ratio: 1 / 1，但仅支持chrome 88+、firefox 89+、safari 15.4+；旧版safari及ie需降级为padding-top: 100%+position: absolute方案。
用 aspect-ratio 最直接，但得看浏览器支持情况
现代 CSS 提供了 aspect-ratio 属性，一行就能搞定宽高比固定——包括正方形（aspect-ratio: 1 / 1）。但它在 Safari 15.4 之前不支持，IE 完全不支持。如果你的项目需要兼容旧版 Safari 或 IE，就得换方案。
实操建议：
- 优先写
aspect-ratio: 1 / 1，再加一层降级（见下一条） - 搭配
width: 100%或max-width控制自适应宽度，高度自动跟随 - 注意：父容器需有明确宽度（比如
width: 100%或设为 flex/grid 子项），否则aspect-ratio可能无效果
兼容方案：用 padding-top 百分比触发高度计算
CSS 中 padding 的百分比值是相对于**父元素宽度**计算的，这个特性可以“骗”出固定宽高比。正方形只需让 padding-top 等于宽度（即 100%）。
典型写法：
.square {
width: 100%;
padding-top: 100%; /* 高度 = 宽度 */
position: relative;
}
.square::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
说明：
- 盒子本身没有内容高度，靠
padding-top“撑开”容器 - 内部内容需用
position: absolute覆盖进去，否则会被 padding 推下去 - 这个技巧在所有浏览器都有效，但结构稍重，且不支持
box-sizing: border-box对 padding 的常规理解（因为 padding 是用来控制尺寸的）
Flex/Grid 布局里更自然的写法
如果父容器已经是 display: flex 或 display: grid，可以直接利用子项行为简化处理。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
例如 Flex 场景：
.container {
display: flex;
width: 100%;
}
.square {
flex: 0 0 auto;
width: 100%;
aspect-ratio: 1 / 1;
}
或 Grid 场景（更可控）：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grid-item {
aspect-ratio: 1 / 1;
}
要点：
- Grid 中
aspect-ratio在主流浏览器中表现稳定，且自动响应列宽变化 - Flex 下需避免
flex: 1导致拉伸变形，用flex: 0 0 auto锁定尺寸逻辑 - 两种布局下都不用额外 hack，语义清晰，维护成本低
别忽略内容溢出和缩放适配问题
正方形盒子常用来放图片、图标或卡片，但内容未必刚好填满。容易踩的坑：
-
img默认会拉伸变形，记得加object-fit: cover或contain - 文字内容可能换行错位，用
display: flex; align-items: center; justify-content: center居中更稳 - 移动端缩放时，
aspect-ratio依然生效，但若父容器用了vw单位，要确认视口缩放是否影响预期尺寸 - 如果盒子要响应式地在不同断点切换比例（比如手机竖屏变长方形），
aspect-ratio支持媒体查询内覆盖，比 padding 方案更容易维护
真正麻烦的不是怎么画出正方形，而是它里面的东西要不要随尺寸等比缩放、要不要保持可读性、要不要在不同设备上维持交互热区大小——这些得结合具体业务定，CSS 只负责把框框住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
