在背景中的屏幕左半部分渲染图像

Question

我无法在屏幕左半部分完全渲染图像，如果完全渲染则左半部分的宽度未满，或者如果宽度已满则高度溢出。 这是一个带有 Tailwind CSS 和 Material UI 样式的 React 应用程序。

 <div className="flex h-screen">
      <div
        className="w-1/2 h-screen bg-no-repeat bg-contain flex m-auto"
        style={{
          backgroundImage: `url(${signbg2})`,
        
        }}
      >
        <div className="h-screen m-auto text-white">
          <p>Solutions for the mining industry</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            vehicula luctus libero non eleifend. Vestibulum ante ipsum.
          </p>
        </div>
      </div>
      <div>Login form on the left</div>
<div>

React 应用程序中的当前图像：

我希望宽度正好是屏幕左侧的一半，如下图所示。

Answer 1

在左侧 div 中将

w-1/2

更改为

flex-1

并在右侧 div 添加

flex-1

<div className="flex h-screen bg-cyan-500">
                <div
                    className="flex-1 h-screen bg-no-repeat bg-contain flex m-auto bg-slate-500"
                    style={{
                        backgroundImage: `url(${signbg2})`,
                    }}
                >
                    <div className="h-screen m-auto text-white">
                        <p>Solutions for the mining industry</p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula luctus libero non
                            eleifend. Vestibulum ante ipsum.
                        </p>
                    </div>
                </div>
                <div className="flex-1">Login form on the left</div>
            </div>