How to remove space around Nextjs image?

Question

I use Nextjs's Image component. It works great, but it displays space around the image that forces me to apply negative margins on a wrapper to properly align it. Also, it makes the hover effect looks like crap (the user has to put his mouse far away from the image to have an animation exit. It looks buggy.). How to remove the useless space?

Code example:

// image
<div className={styles.wrapper}>
   <Image src={pic.src} alt="pic" width={344} height={634} />
</div>

// style
.wrapper {
  margin-top: 200px;
  width: 100%;
  text-align: center;
}

Answer 1

Add this prop to your image and style your wrapper div as you desire:

<div className={styles.wrapper}>
   <Image src={pic.src} alt="pic" layout="fill"/>
</div>