如何让未加载图片的空img元素保持正方形？div已实现但img失效

你说得完全对！img作为替换元素，:before和:after伪元素确实对它无效，所以靠伪元素撑开高度的方法在img上就行不通。不过有几个实用的方案能解决这个问题，确保图片未加载时img也能保持正方形：

方案1：用容器包裹img（兼容性最好） #

这是最稳妥的方案，不管新旧浏览器都能完美运行。核心思路是让容器维持正方形比例，img绝对定位占满容器：

<!-- HTML结构 -->
<div class="square-wrapper">
  <img class="square-img" alt="" />
</div>

/* CSS样式 */
.square-wrapper {
  width: 20%; /* 控制正方形的宽度 */
  border: 3px solid red;
  position: relative;
}
/* 用伪元素撑开容器高度，实现1:1比例 */
.square-wrapper:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.square-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选，防止图片拉伸变形，按需使用 */
}

这个方法的优势在于，不管图片是否加载，容器都会稳定保持正方形，img元素会自动填满容器空间，不会出现塌陷。

方案2：使用CSS原生aspect-ratio属性（现代浏览器首选） #

如果你的项目不需要兼容IE等老旧浏览器，直接用aspect-ratio是最简洁的解法——这是CSS专门为控制元素宽高比例设计的属性，对替换元素和非替换元素都生效：

<!-- HTML结构 -->
<img class="square" alt="" />

/* CSS样式 */
.square {
  width: 20%;
  border: 3px solid red;
  aspect-ratio: 1 / 1; /* 直接设置宽高比为1:1 */
  object-fit: cover; /* 可选，优化图片显示效果 */
}

一行代码就能搞定正方形比例，空img会保持正方形，图片加载后也会自动按比例缩放，非常省心。

方案3：直接给img设置padding撑开高度（极简但有局限） #

你也可以跳过伪元素，直接通过padding-bottom和height:0来撑开img的高度，利用padding百分比相对宽度计算的特性：

<!-- HTML结构 -->
<img class="square" alt="" />

/* CSS样式 */
.square {
  width: 20%;
  border: 3px solid red;
  height: 0;
  padding-bottom: 100%;
  display: block; /* 消除img作为inline元素的默认间隙 */
  width: 100%;
  object-fit: cover;
}

这个方法不用额外嵌套标签，但要注意：如果图片的原始尺寸比例不是1:1，可能需要配合object-fit来避免变形，而且在一些极旧的浏览器中可能存在兼容性问题。

总结 #

• 追求全浏览器兼容：选容器包裹法
• 只需要支持现代浏览器：选aspect-ratio法
• 想要极简结构：可以试试padding撑开法

内容的提问来源于stack exchange，提问作者Dashiell Rose Bark-Huss