在宽度百分比，高度不确定的情况下，如何保证图片正方形展示

CSS, HTML / 2025年8月28日 / hamster

方法一：

.square-container {
  width: 20%;
  aspect-ratio: 1 / 1; /* 宽高比 1:1，自动设置高度等于宽度 */
  overflow: hidden; /* 可选：裁剪溢出 */
}

.square-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例填充，可选 */
}

<div class="square-container">
  <img src="your-image.jpg" alt="正方形图片">
</div>

方法二：

.square-container {
  width: 20%;
  position: relative;
  padding-top: 100%; /* 高度 = 宽度，形成正方形 */
  overflow: hidden;
}

.square-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="square-container">
  <img src="your-image.jpg" alt="正方形图片">
</div>

方法一现代浏览器支持，但对于一些老版本浏览器可能不支持，方法二兼容老版本。

疑问：

为什么padding-top: 100%; 就能让宽高一致呢？

CSS 规范规定：

padding 的百分比值，是相对于其父元素的 width（宽度）来计算的，而不是高度。

CSS, html