如何让Div背景图片填充浏览器窗口并实现自适应尺寸？

我来帮你搞定这个全屏自适应背景图的需求！你的现有代码已经有了基础，但高度固定700px会导致在不同屏幕（尤其是移动端）出现背景截断或者留白的问题，咱们调整一下就能达到理想效果：

第一步：优化HTML结构 #

先清理掉冗余的<br>，如果内部的<img>是页面内容（而非背景）就保留，否则可以移除，让结构更简洁：

<div class="graph">
  <h1>Latest SKE Graph</h1>
  <!-- 若这是内容图则保留，否则可删除 -->
  <img src="knowledge_graph.jpg" alt="SKE Knowledge Graph">
</div>

第二步：修改CSS实现全屏自适应 #

核心是把固定高度改成视口高度单位，同时处理全局样式避免留白，具体代码如下：

/* 重置body默认边距，避免背景周围出现空白 */
body {
  margin: 0;
  padding: 0;
}

.graph {
  background-image: url("pexels-photo-279366.jpeg");
  background-size: cover; /* 保持图片比例，覆盖整个元素区域 */
  background-position: center; /* 图片始终居中显示 */
  min-height: 100vh; /* 确保元素至少占满浏览器窗口高度 */
  height: auto; /* 内容超出窗口时自动撑开高度 */
  text-align: center;
  /* 可选：让内容垂直居中，提升视觉体验 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box; /* 确保padding不会增加元素总宽度 */
}

/* 适配移动端的内容图样式（如果保留了内部img） */
.graph img {
  max-width: 100%;
  height: auto;
  margin-top: 1rem;
}

关键要点说明 #

• min-height: 100vh：使用视口高度单位，确保背景至少铺满整个浏览器窗口，当内容超过窗口高度时，元素会自动延伸，不会出现背景截断。
• background-size: cover：保证图片按比例缩放，完全覆盖元素区域，不会出现拉伸变形或留白。
• background-position: center：无论屏幕怎么缩放，图片始终居中显示，避免重要内容被裁切。
• 重置body样式：消除浏览器默认的margin和padding，防止背景边缘出现空白。
• 移动端适配：内部内容图设置max-width:100%，确保在小屏幕上不会超出容器范围。

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