next.jstailwind-cssnext-images

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

i'm learning nextjs and tailwind css.

I want to fill half width using next/image.

enter image description here

but, it's using full width


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>
  );
}

This is my code, plz let me know..

Solution

  • Set position: relative for the wrapping 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>
  );
}