HTML/CSS图片网格JPG图片刷新时重复、变形或消失问题咨询

问题原因 #

这个问题本质是浮动布局的高度坍塌特性 + JPG的异步加载特性共同导致的，和图片格式本身的编码逻辑有关：

1. 你使用float: left实现网格布局，没有给.grid-item设置固定高度/宽高比，也没有做清除浮动处理。页面首次渲染时图片还未加载完成，所有图片容器的高度默认是0，浮动元素排版会出现错位。
2. JPG多数为逐行/渐进式编码，加载过程中会分阶段渲染、多次触发页面重绘，等图片完全加载出实际高度时，已经错位的浮动布局不会自动重新计算排版，就会出现图片重叠、重复显示、消失等异常。PNG没有渐进式加载的特性，加载完成后才会一次性渲染，所以不会触发该问题。

解决方案 #

方案1（推荐）：替换浮动为网格布局 #

直接抛弃浮动实现，用CSS Grid布局从根源避免高度坍塌问题，修改CSS代码如下：

/* 给包裹所有.grid-item的父容器加以下样式，假设父容器类名为grid-container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0; /* 可以自定义网格间距 */
  padding: 0;
  margin: 0;
}

/* 删掉原来.grid-item里的float: left; width:33%; 替换为以下代码 */
.grid-item {
  width: 100%;
}

对应HTML需要给所有.grid-item的外层div加class="grid-container"即可。

方案2（兼容旧布局）：固定容器宽高比 #

如果需要保留现有浮动布局，给图片容器提前预留占位空间，避免加载过程中高度变化导致错位：

.grid-item {
  float: left;
  width: 33%;
  aspect-ratio: 3/4; /* 按你实际图片的宽高比例调整即可 */
  overflow: hidden;
}

如果需要兼容不支持aspect-ratio的旧浏览器，可以用传统padding方案实现固定宽高比：

.grid-item {
  float: left;
  width: 33%;
  position: relative;
  padding-top: 133%; /* 对应3:4的宽高比，数值=高度/宽度*100%，按需调整 */
}
.grid-item figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tm-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片不变形 */
}

方案3：补充图片原生属性 #

给所有<img>标签明确设置width和height原生属性，让浏览器在图片加载前就可以提前计算预留占位空间，减少布局偏移：

<img src="xxx.jpg" alt="xxx" class="tm-img" width="320" height="427">

内容的提问来源于stack exchange，提问作者Danielillo