SVG背景图固定底部居中，屏幕扩展时上方溢出隐藏的实现问题

需要将SVG作为背景图使用，要求宽度设为100%，屏幕尺寸扩大时高度同步增加。SVG核心区域位于底部中心，屏幕过大时需滚动才能到达该区域，希望焦点始终保持在SVG底部中心，图片扩展时高度向上延伸，超出部分通过overflow: hidden隐藏，但当前实现无效，且overflow: hidden的位置存疑。

原React组件代码：

import bground from '../images/background.svg';

const Hero = () => {
  return (
    <div id="hero">
      Hello
      <div>
        hello
        <img
          id="background-img"
          width={`100%`}
          height={`100%`}
          src={bground}
          alt="background"
        />
      </div>
    </div>
  );
};

export default Hero;

原SCSS代码：

#hero {
  position: relative;
  height: 85vh;
  width: 100vw;

  #background-img {
    position: absolute;
    overflow: hidden;
    top: 100%;
    left: 50%; 
  }
}

核心修改点如下：

• overflow: hidden必须设置在父容器（#hero）上，只有父容器才能裁剪子元素的超出部分，放在图片本身上无效
• 调整SVG图片的定位逻辑，固定其底部中心位置，让高度向上延伸
• 使用object-fit: cover确保SVG保持原有比例，避免拉伸变形

修改后的React组件（移除硬编码的width/height，由CSS控制）：

import bground from '../images/background.svg';

const Hero = () => {
  return (
    <div id="hero">
      Hello
      <div className="background-wrapper">
        hello
        <img
          id="background-img"
          src={bground}
          alt="background"
        />
      </div>
    </div>
  );
};

export default Hero;

修改后的SCSS代码：

#hero {
  position: relative;
  height: 85vh;
  width: 100vw;
  overflow: hidden; /* 关键：父容器设置overflow隐藏超出部分 */

  .background-wrapper {
    position: absolute;
    inset: 0; /* 铺满父容器 */
    z-index: -1; /* 把背景放到内容下方 */
  }

  #background-img {
    position: absolute;
    bottom: 0; /* 固定底部 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 配合left:50%实现精准水平居中 */
    min-width: 100%; /* 确保宽度至少覆盖容器 */
    min-height: 100%; /* 确保高度至少覆盖容器 */
    object-fit: cover; /* 保持SVG比例，超出部分裁剪 */
    object-position: center bottom; /* 强制焦点在底部中心 */
  }
}

关键说明 #

1. overflow: hidden移到#hero后，容器内所有超出85vh高度的内容都会被裁剪，包括SVG向上延伸的部分
2. object-position: center bottom确保SVG的底部中心始终是显示焦点，即使图片高度超过容器
3. min-width/min-height: 100%保证SVG在任何屏幕尺寸下都能覆盖容器，object-fit: cover避免比例失调
4. 添加z-index: -1让背景不遮挡前景内容（比如示例中的"Hello"文本）

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