学校活动网站背景无法随图片实现响应式适配问题求助

看起来你的核心问题是背景容器无法随着图片内容的高度变化而延伸，当浏览器窗口缩小导致图片换行后，下方的内容脱离了背景色范围。这主要是由两个CSS设置导致的：

1. #project 使用了固定的 height: 100vh，意味着它的高度永远等于当前视口高度，不会随内部内容的高度增加而撑开
2. .gallery 设置了 position: absolute，脱离了文档流，导致父容器无法感知到它的实际高度，自然无法调整自身高度

修复步骤 #

1. 调整背景容器的高度属性

将 #project 的 height: 100vh 替换为 min-height: 100vh，这样既能保证背景至少覆盖整个视口，又能在内容超过视口高度时自动延伸：

#project { 
  background: #033541; 
  width: 100%; 
  min-height: 100vh; /* 替换固定height为min-height */
  overflow-x: hidden; 
  padding: 20px 0; /* 添加上下内边距，优化内容与边缘的距离 */
}

2. 让图片画廊回到文档流

移除 .gallery 的 position: absolute，并通过 margin: 0 auto 实现水平居中（因为grid容器有明确宽度）：

.gallery { 
  padding: 30px; 
  /* 移除position:absolute */
  justify-content: center; 
  align-items: center; 
  width: 98vw; 
  max-width: 1200px; /* 可选：限制最大宽度，避免太宽时图片拉伸过度 */
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); /* 让列自适应空间，比固定230px更灵活 */
  column-gap: 15px; 
  row-gap: 15px; 
  margin: 0 auto; /* 水平居中 */
}

3. 让图片真正响应式

将图片的固定宽度 width: 230px 改为 width: 100%，这样图片会自适应所在的grid列宽度：

.gallery img { 
  border-radius: 10px; 
  width: 100%; /* 替换固定宽度为100% */
  height: 230px; 
  object-fit: cover; 
  object-position: center; 
}

修改后的完整代码 #

CSS

*{ box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* project*/
#project { 
  background: #033541; 
  width: 100%; 
  min-height: 100vh; 
  overflow-x: hidden; 
  padding: 20px 0;
}
.project-title h2{ 
  color: white; 
  font-size: 75px; 
  margin: 30px auto; 
  text-align: center; 
  font-family: 'Poppins', sans-serif; 
}
.gallery { 
  padding: 30px; 
  justify-content: center; 
  align-items: center; 
  width: 98vw; 
  max-width: 1200px;
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); 
  column-gap: 15px; 
  row-gap: 15px; 
  margin: 0 auto;
}
.gallery img { 
  border-radius: 10px; 
  width: 100%; 
  height: 230px; 
  object-fit: cover; 
  object-position: center; 
}

HTML

<!----project start---->
<div id = "project">
  <div class = "pro">
    <div class="project-title">
      <h2>PROJECT</h2>
    </div>
    <div class="gallery">
      <img src = "image1.jpg" />
      <img src = "image2.jpg" />
      <img src = "image3.jpg" />
      <img src = "image4.jpg" />
      <img src = "image5.jpg" />
      <img src = "image6.jpg" />
      <img src = "image7.jpg" />
      <img src = "image8.jpg" />
    </div>
  </div>
</div>

这样修改后，当浏览器窗口缩小，图片自动换行时，背景容器会跟着内容高度自动延伸，背景色也会覆盖所有图片区域，真正实现响应式适配。

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