DEV Community

prajin10
prajin10

Posted on

How to give same sizes to dynamic image in next js .

In next js using Image tag can be consfusing most of time because u have to either use width and height or layout="fill" compulsory so in those case making the dynamic image of same size can be quite confusing so here i am with my solution

  <Image src={bookInfo?.Cover?.url} alt="book" width={39.26} height={57.06}  />
Enter fullscreen mode Exit fullscreen mode

Above code will give size(39.26px * 57.06px ) to image.But wait using only this may cause the image to be blurry / low quality so in that case u must have to following code

sizes="100vw"

Which will make the image clear and of perfect size .

Top comments (0)