能否用纯HTML/CSS实现图片背景内容的自适应布局？

可以用CSS Grid布局实现所有需求，无需JavaScript，具体方案如下：

核心实现代码 #

HTML结构 #

<div class="container">
  <img src="your-image-path.jpg" alt="背景图" class="bg-image">
  <div class="content">
    <!-- 这里放置任意内容 -->
  </div>
</div>

CSS样式 #

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.bg-image {
  width: 100%;
  height: auto;
  grid-area: 1 / 1;
  z-index: 0;
}

.content {
  grid-area: 1 / 1;
  z-index: 1;
  /* 可选：开启垂直居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  min-height: 100%;
}

需求适配说明 #

• 内容垂直居中：给.content添加display: flex; flex-direction: column; justify-content: center;即可实现，不需要时直接移除这三行代码。
• 内容短于图片时容器适配图片高度：Grid容器的高度由网格内最高元素决定，图片通过width:100%; height:auto;保持原始比例，内容容器的min-height:100%确保其高度不低于图片，最终容器高度等于图片高度。
• 内容长于图片时内容正常流式排布：当内容高度超过图片高度，内容容器会被自身内容撑开，Grid容器高度随之适配内容，图片始终保持完整比例显示（仅受宽度约束）。

解决原有方案的缺陷 #

• 避免了「内容绝对定位」导致的容器高度不跟随内容变化、内容溢出截断的问题，因为内容容器处于Grid文档流内，容器高度会自动适配内容。
• 解决了「图片绝对定位」导致的内容较短时图片高度被容器限制的问题，图片处于Grid流内，会优先决定容器高度（当内容更短时）。

内容的提问来源于stack exchange，提问作者liam-milbel