如何使用flexbox实现背景图片尺寸随前景内容大小自适应缩放

数据老陈

2026-9-25

问题核心原因

你给.content设置了position: absolute，导致其完全脱离文档流，父容器.section的高度无法被实际内容撑开，只能被.section_image里的原图高度撑满，自然会出现多余空白
外层.section没有设置为flex容器，子元素的flex属性完全不生效
img没有设置宽高限制，会保持原生尺寸展示

修正方案（纯Flexbox实现，符合要求）

HTML修正（补全你原有代码漏写的引号，React场景下保留`className`即可）

<div class="section">
    <div class="section_image">
        <img src={Image} alt="" />
    </div>
    <div class="content">
        <h1>Title</h1>
        <p>Body Text</p>
    </div>
</div>

CSS样式（兼容你原有的SCSS嵌套写法）

.section {
  /* 外层设为flex容器，满足flexbox实现要求 */
  display: flex;
  position: relative;
  width: fit-content; /* 宽度随内容自适应，如需撑满父级可改为width: 100% */
}

.section_image {
  /* 图片容器完全铺满父容器尺寸，随父容器大小动态变化 */
  position: absolute;
  inset: 0;
  z-index: 0;
}

.section_image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例铺满容器，避免变形 */
}

.content {
  /* 内容层级高于图片，父容器高度由内容实际高度撑开 */
  position: relative;
  z-index: 1;
  flex: 1;
  /* 可自行调整内边距，控制内容与边缘的距离，同时会同步撑开背景图尺寸 */
  padding: 2rem 3rem;
}