我想使用 next/image 来填充 div 容器中的一半宽度

Question

我正在学习 nextjs 和 tailwind css。

我想使用 next/image 填充半角。

但是，它使用的是全角


function Slider() {
  return (
    <div className="w-full h-screen flex  relative">
      <div className="Arrow left-[10px]">
        <ArrowLeftOutlined />
      </div>
      <div className="Wrapper h-full flex">
        <div className=" w-screen h-screen flex items-center">
          <div className="ImgContainer h-full flex-1 ">
            <Image
              className=""
              src=""
              layout="fill"
            />
          </div>
          <div className="Info flex-1 p-[50px]"></div>
        </div>
      </div>
      <div className="Arrow right-[10px]">
        <ArrowRightOutlined />
      </div>
    </div>
  );
}

这是我的代码，请告诉我..

Answer 1

设置position: relative为环绕div

function Slider() {
  return (
    <div className="w-full h-screen flex  relative">
      <div className="Arrow left-[10px]">
        <ArrowLeftOutlined />
      </div>
      <div className="Wrapper h-full flex">
        <div className=" w-screen h-screen flex items-center">
          <div className="ImgContainer h-full flex-1 relative">
            <Image
              className=""
              src=""
              layout="fill"
            />
          </div>
          <div className="Info flex-1 p-[50px]"></div>
        </div>
      </div>
      <div className="Arrow right-[10px]">
        <ArrowRightOutlined />
      </div>
    </div>
  );
}

我想使用 next/image 来填充 div 容器中的一半宽度

I want to use next/image to fill half width in div container

next.js

tailwind-css

next-images