动态图片网格高度溢出修复及无间隙布局实现

问题诊断 #

当前代码存在两个核心问题：

1. 高度溢出：#_grid 虽设置了height:80%，但内部#_row未被限制高度，图片总高度超过容器范围，导致页面滚动。
2. 图片间隙：图片默认是行内元素，存在基线对齐的垂直间隙；同时flex布局的默认特性可能产生额外间距。

修正后的代码 #

CSS 部分 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 统一盒模型，避免尺寸计算偏差 */
}

#_parent {
  display: flex;
  height: 100vh;
  width: 50vw;
  align-items: center;
  justify-content: center; /* 确保网格在容器中水平居中 */
  margin: auto;
}

#_grid {
  height: 80%;
  width: 100%;
  overflow: auto; /* 当图片总高度超过容器时，显示内部滚动条而非溢出页面 */
}

#_row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0; /* 彻底移除图片间的横竖间隙 */
}

._img {
  width: calc(100% / 3);
  height: auto; /* 保持图片比例，高度自适应宽度 */
  display: block; /* 移除行内元素的基线垂直间隙 */
  object-fit: contain; /* 保留完整图片，若需填充单元格可改为cover */
}

HTML 部分（结构无需修改） #

<div id="root">
  <div id="_parent">
    <div id="_grid">
      <div id="_row">
        <img src="//placeimg.com/600/400?text=1" class="_img">
        <img src="//placeimg.com/600/400?text=2" class="_img">
        <img src="//placeimg.com/600/400?text=3" class="_img">
        <img src="//placeimg.com/600/400?text=4" class="_img">
        <img src="//placeimg.com/600/400?text=5" class="_img">
        <img src="//placeimg.com/600/400?text=6" class="_img">
        <img src="//placeimg.com/600/400?text=7" class="_img">
        <img src="//placeimg.com/600/400?text=8" class="_img">
        <img src="//placeimg.com/600/400?text=9" class="_img">
        <img src="//placeimg.com/600/400?text=10" class="_img">
        <img src="//placeimg.com/600/400?text=11" class="_img">
        <img src="//placeimg.com/600/400?text=12" class="_img">
        <img src="//placeimg.com/600/400?text=13" class="_img">
        <img src="//placeimg.com/600/400?text=14" class="_img">
        <img src="//placeimg.com/600/400?text=15" class="_img">
      </div>
    </div>
  </div>
</div>

关键修改说明 #

• 盒模型统一：添加box-sizing: border-box，避免padding/margin干扰元素尺寸计算。
• 高度约束优化：给#_grid设置overflow: auto，让超出容器高度的部分在内部滚动，而非溢出到页面；移除冗余的position: relative和display: flex，简化布局层级。
• 间隙彻底清除：
  • 图片设置display: block，消除行内元素自带的基线垂直间隙；
  • #_row添加gap: 0，确保flex布局下无额外间距。
• 图片尺寸适配：用width: calc(100%/3)固定列宽，height: auto维持图片比例，同时去掉冗余的max-width/max-height设置，让图片自适应容器尺寸。

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