How to remove white space in mobile view in Next.js while using tag?

Question

I am creating a website in Next.js. I used<Image /> tag for placing the images in the website. I am getting some white space in the image components only in mobile view but in desktop it was coming fine ,when I checked in network tag I am getting svg+xml file like this <img alt aria-hidden="true" src='data:image/svg+xml base 64'>. I think this svg+xml created the white space in the images? Can anyone help me with this? How can I remove this svg+xml file?

This is the html code i used for image :

 <div className={styles.card}>
  <div className={styles.content}>
    <div className={styles.image}>
      <Image
        src={image2}
        alt="picture"
        width={88}
        height={88}
       
        layout="intrinsic"
        quality={100}
      />
    </div>
    <h3>{title}</h3>
    <p>{description}</p>
  </div>
</div>

scss:

scss code image

when I long press on the white space in mobile view showing this

when i used <img /> tag for images purpose this white space is not coming,only when i used this nextjs <Image /> tag im getting the white space

Answer 1

For Next.js version 12

Another work around is to add the following styling to the parent:

.wrapper {
  letter-spacing: 0;
  word-spacing: 0;
  font-size: 0;
}

References

• Github: next/image add additional pixels to parent element without a trace
• Github: Images in 10.0.6 rendered with whitespace below image

Answer 2

Here's what I do:

// Fix Next.js images
span[style^="box-sizing:border-box;display:inline-block"] {
  display: block !important;
}

Honestly it's a hack, but Next's implementation is a hack too.

Answer 3

The white space is caused most likely due to setting of placeholder props on the Image tag. When you use this prop, a svg element is inserted automatically by Nextjs as you can see in the demo if you inspect the image.

You can do the following

1. If you are using a dynamic image, you need to pass a url to the blurDataURL property explicitly. If you are using a static image, you don't need to provide anything.
2. If you don't need a placeholder, you can omit this prop and let it default to empty.
3. If you have not set the placeholder prop, it may be due to conflicting css. Try removing any css styling the image from the .scss file and use the styling props in Nextjs Image

Answer 4

img { 
   object-fit: cover; 
}

if you add this the image will cover the whole area, but it crops some part of the image, you can also try giving it as a background image, and give background size cover,

the issue happened because you use height and width to the image, the image will only be visible as related to its resolution,

so also try giving width 100% for the image (give fixed width to the outer container of image ) and not giving height for the image (also give a max-height for image container and overflow: hidden)