Next.js image doesnt cover whole screen in xs size of browser

Question

According to the title I want to cover whole width of screen , on xs size of browser using next.js image . But it could'not do it :

  <div className="relative overflow-hidden h-64  bg-gray-400">
    <Image
      src={props.img}
      layout="fill"
      objectFit="cover"
      alt={props.name}
      placeholder="empty"
      //blurDataURL={blur!}
      sizes="(max-width: 768px) 100vw,  50vw"
    />
  </div>

How can I do it ? Where should i change?