如何用CSS实现自适应的正方形元素-css教程-PHP中文网

aspect-ratio: 1/1是最简洁方案，但为兼容Safari 15.4前、Chrome 88前等旧浏览器，需回退至padding-bottom: 100%; height: 0; position: relative外层+position: absolute内层的经典组合，其原理是padding百分比基于父宽计算，配合height: 0和绝对定位实现等比占位。

如何用css实现自适应的正方形元素

直接用 aspect-ratio: 1 / 1 是最干净的解法，但如果你要支持 Safari 15.4 之前、Chrome 88 之前或旧版 Firefox，就得回退到 padding-bottom + height: 0 的经典组合——它不是“过时”，而是目前兼容性最稳的方案。

为什么 `padding-bottom` 百分比能撑出正方形

因为 padding-bottom 的百分比值，是按父元素的 width 计算的，不是按自身高度。所以当父容器设 width: 30%、padding-bottom: 30%，底部内边距就等于父宽的 30%，视觉上“高度”就和“宽度”对齐了。

关键点在于：height: 0 必须写，否则文字、图片等默认内容会把容器撑高，破坏比例。

padding-top 也能用，但内容会从顶部溢出，必须配合 position: absolute + top: 0 才可控
margin-bottom 不行：它不参与盒模型高度计算，无法撑开容器
如果父容器 width 是响应式写法（如 min(40px, 20%)），padding-bottom 仍按该计算结果生效，比例不变

必须加 `position: relative` 和 `absolute` 吗

不是语法强制，但几乎总是需要。因为 height: 0 + padding-bottom 撑出来的空间本身不承载流式内容—— 或文字会默认在 height: 0 区域下方渲染，导致错位或整体下移。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

典型做法是用绝对定位把内容“钉”进 padding 撑出的空间里：

.wrapper {
  width: 25%;
  height: 0;
  padding-bottom: 25%;
  position: relative;
  overflow: hidden;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

overflow: hidden 要加，防原始图片宽高比严重偏离 1:1 时边缘露出来
必须设 display: block，否则 inline 默认行为会在底部留空白间隙
如果只放纯色块或背景图，且不关心语义，可省略子元素，直接用 background-image 配 background-size: cover