如何让div恢复原高度？及元素溢出问题排查

核心问题原因 #

1. 容器高度被撑开、宽度不变的问题 #

• 你的grid-item没有设置尺寸限制和溢出控制，当插入的图片宽高比与grid-item不一致时（比如竖版图片），max-width:100%会让图片宽度适配格子宽度，但高度会按比例放大，直接撑开grid-item的高度。
• grid-container的height:600px并非强制固定高度，当内部行高被内容撑开时，整个容器高度会随之变大；而宽度因grid-template-columns:repeat(5,1fr)的固定分配逻辑，不会发生变化。

2. 图片堆叠问题 #

• 你用document.querySelector(".gone")获取插入图片的容器，但querySelector只会选中第一个带有gone类的元素，后续点击其他格子时，图片都会被插入到第一个格子里，导致堆叠。

修正后的完整代码 #

HTML（无需修改） #

<div class="grid-container">
  <div class="grid-item" id="1"></div>
  <div class="grid-item" id="2"></div>
  <div class="grid-item" id="3"></div>
  <div class="grid-item" id="4"></div>
  <div class="grid-item" id="5"></div>
  <div class="grid-item" id="6"></div>
  <div class="grid-item" id="7"></div>
  <div class="grid-item" id="8"></div>
  <div class="grid-item" id="9"></div>
  <div class="grid-item" id="10"></div>
  <div class="grid-item" id="11"></div>
  <div class="grid-item" id="12"></div>
  <div class="grid-item" id="13"></div>
  <div class="grid-item" id="14"></div>
  <div class="grid-item" id="15"></div>
  <div class="grid-item" id="16"></div>
  <div class="grid-item" id="17"></div>
  <div class="grid-item" id="18"></div>
  <div class="grid-item" id="19"></div>
  <div class="grid-item" id="20"></div>
  <div class="grid-item" id="21"></div>
  <div class="grid-item" id="22"></div>
  <div class="grid-item" id="23"></div>
  <div class="grid-item" id="24"></div>
  <div class="grid-item" id="25"></div>
</div>

JavaScript（修改插入图片的目标容器） #

var gridItems = document.querySelectorAll('.grid-item');
gridItems.forEach(function(item) {
  item.addEventListener('click', function() {
    item.classList.add('no-hover');
    item.classList.add('transform-active');
    item.classList.add('gone');
  });
});

document.querySelectorAll('.grid-item').forEach(function(element) {
  element.addEventListener('click', function() {
    var elem = document.createElement("img");
    elem.classList.add("revealed")
    elem.src = "https://cdn.discordapp.com/attachments/1051253642876952636/1069628656038719608/image-removebg-preview_1.png"
    // 直接插入当前点击的格子，而非找第一个.gone元素
    element.appendChild(elem);
  });
});

CSS（添加尺寸限制与溢出控制） #

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* 明确设置行高，避免被内容撑开 */
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 15px;
  height: 600px;
  width: 600px;
  margin: auto;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  float: left;
}

.grid-item {
  border-radius: 12px;
  background-color: #3d499b;
  box-shadow: 5.5px 5.5px #1e286c;
  border: 2px solid black;
  transition: all 0.3s ease-in-out;
  /* 强制容器尺寸，超出内容隐藏 */
  overflow: hidden;
  /* 确保图片在容器内居中显示 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-item:not(.no-hover):hover {
  animation: raise 0.2s ease-in-out;
  background-color: #5463cd;
}

.grid-item.transform-active {
  animation: embiggen 0.2s ease-out 0s 1;
}

@keyframes raise {
  0%,100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes embiggen {
  100% {
    transform: scale(1.1);
  }
}

.grid-item.gone {
  visibility: hidden;
}

.revealed {
  max-width: 100%;
  max-height: 100%;
  visibility: visible;
  /* 可选：保持图片比例，填充容器不变形 */
  object-fit: contain;
}

关键修改点说明 #

1. JavaScript部分：将document.querySelector(".gone").appendChild(elem)改为element.appendChild(elem)，确保每个点击的格子都插入专属图片，解决堆叠问题。
2. CSS部分：
   • 给grid-container添加grid-template-rows: repeat(5, 1fr)，固定每行高度，避免被内容撑开。
   • 给grid-item添加overflow:hidden，防止图片溢出撑开容器；同时添加display:flex+align-items+justify-content让图片在格子里居中。
   • 给.revealed添加object-fit:contain，保证图片按比例显示，不会变形（若需要填充整个格子可改用object-fit:cover）。

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