React+Tailwind CSS左侧半屏背景图渲染异常求助

问题描述 #

在React、Tailwind CSS及Material UI项目中，左半屏背景图出现适配矛盾：若完整显示图片，左半屏宽度无法占满；若宽度占满左半屏，图片高度会溢出。

修改后的实现代码 #

<div className="flex h-screen">
  <div
    className="w-1/2 h-screen bg-no-repeat bg-cover bg-center relative"
    style={{
      backgroundImage: `url(${signbg2})`,
    }}
  >
    <div className="absolute inset-0 flex flex-col justify-center px-8 text-white">
      <p>矿业行业解决方案</p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        vehicula luctus libero non eleifend. Vestibulum ante ipsum.
      </p>
    </div>
  </div>
  <div className="w-1/2 flex items-center justify-center">
    登录表单区域
  </div>
</div>

关键调整说明 #

• 将bg-contain替换为bg-cover：让背景图按比例缩放至完全覆盖容器，同时保持图片原有比例，解决宽度撑不满的问题，且不会拉伸变形
• 添加bg-center：确保背景图在容器内居中显示，减少边缘内容被裁切的概率
• 使用relative + absolute inset-0布局文本：让文本容器铺满背景图区域，通过flex-col justify-center实现垂直居中，避免原h-screen导致的高度溢出问题
• 给右侧表单区域添加w-1/2：保证左右两侧各占半屏，布局更规整

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