React项目中如何实现背景图片响应式适配？

针对你要在小屏幕上让背景图尽量保持高度覆盖Header、Navbar和介绍内容的需求，给你几个比单纯用contain更实用的方案：

方案1：用min-height替代固定高度 + 优化background-position #

把固定高度改成min-height确保容器高度至少能覆盖内部内容，同时调整background-position保证图片关键区域在小屏幕不被裁剪：

<div
  style={{
    backgroundImage: `url("${Peace}")`,
    backgroundSize: "cover",
    backgroundPosition: "center 20%", // 可根据图片关键区域调整百分比
    backgroundRepeat: "no-repeat",
    minHeight: "calc(100vh - 50px)", // 用min-height确保高度足够覆盖内容
    width: "100%",
  }}
>
  <Header />
  <Navbar />
  <div className="homeStrategy text-start">
    <h1 className="homemainTopic">
      <span>mentalland</span> where you can learn, improve, get calm & Be happy
    </h1>
    <h2 className="homesubTopic">
      Lorem ipsum dolor sit amet consectetur. Amet velit convallis amet mi leo aliquet in vestibulum consectetur.
    </h2>
    <div className="homelink">
      <Link to="/" className="learnMore">
        <span className="more">Learn more</span>
      </Link>
    </div>
  </div>
</div>

方案2：用img标签代替background-image（更灵活的控制） #

换成绝对定位的img标签，用object-fit属性精准控制显示逻辑，优先保证高度覆盖容器：

<div style={{ position: "relative", minHeight: "calc(100vh - 50px)", overflow: "hidden" }}>
  {/* 背景图 */}
  <img
    src={Peace}
    alt="Background"
    style={{
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      objectFit: "cover", // 优先覆盖容器，裁剪多余部分；要完整显示用objectFit: "contain"
      objectPosition: "center top", // 调整关键区域位置
      zIndex: -1, // 让内容叠加在图片上方
    }}
  />
  {/* 内容部分 */}
  <Header />
  <Navbar />
  <div className="homeStrategy text-start">
    <h1 className="homemainTopic">
      <span>mentalland</span> where you can learn, improve, get calm & Be happy
    </h1>
    <h2 className="homesubTopic">
      Lorem ipsum dolor sit amet consectetur. Amet velit convallis amet mi leo aliquet in vestibulum consectetur.
    </h2>
    <div className="homelink">
      <Link to="/" className="learnMore">
        <span className="more">Learn more</span>
      </Link>
    </div>
  </div>
</div>

方案3：媒体查询针对小屏幕单独设置background-size #

如果必须用background-image，通过媒体查询在小屏幕下强制图片高度铺满容器：

<div
  style={{
    backgroundImage: `url("${Peace}")`,
    backgroundSize: "cover",
    backgroundPosition: "center top",
    backgroundRepeat: "no-repeat",
    minHeight: "calc(130vh - 50px)",
    // 小屏幕适配
    "@media (max-width: 768px)": {
      backgroundSize: "auto 100%", // 高度铺满容器，宽度自适应，超出部分裁剪
      minHeight: "calc(100vh - 50px)", // 降低小屏幕最小高度避免溢出
    },
  }}
>
  {/* 内容部分不变 */}
  <Header />
  <Navbar />
  <div className="homeStrategy text-start">
    <h1 className="homemainTopic">
      <span>mentalland</span> where you can learn, improve, get calm & Be happy
    </h1>
    <h2 className="homesubTopic">
      Lorem ipsum dolor sit amet consectetur. Amet velit convallis amet mi leo aliquet in vestibulum consectetur.
    </h2>
    <div className="homelink">
      <Link to="/" className="learnMore">
        <span className="more">Learn more</span>
      </Link>
    </div>
  </div>
</div>

方案4：针对移动端使用竖版图片 #

如果原图横版比例不适合小屏幕，提前准备竖版适配图，通过媒体查询切换：

<div
  style={{
    backgroundImage: `url("${Peace}")`, // 默认横版图
    backgroundSize: "cover",
    backgroundPosition: "center top",
    backgroundRepeat: "no-repeat",
    minHeight: "calc(130vh - 50px)",
    "@media (max-width: 768px)": {
      backgroundImage: `url("${PeaceMobile}")`, // 移动端竖版图
      backgroundSize: "cover",
      minHeight: "calc(100vh - 50px)",
    },
  }}
>
  {/* 内容部分不变 */}
</div>

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