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

Question

i'm learning nextjs and tailwind css.

I want to fill half width using next/image.

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..

score 0 · Accepted Answer · answered Feb 14 '22 at 01:20

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

Thanks !!, i must know that absolute and relative position ..! — , Feb 14 '22 at 15:16

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

1 Answers1