我无法在屏幕左半部分完全渲染图像,如果完全渲染则左半部分的宽度未满,或者如果宽度已满则高度溢出。 这是一个带有 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>
在左侧 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>