Bootstrap 4 card usage with responsive next/image - css

Question

<div className="row align-items-center justify-content-center">
<div className="col-md-3 mt-3">
<div className="card bg-light">
<div className="card-img-top">
<Image
src="/character1.png"
alt="Picture of the author"
layout="fill"
/>
</div>
<div className="card-body">
<h5 className="card-title">Emirhan Sirkeci</h5>
<p className="text-muted">Developer</p>
<div className="d-flex justify-content-center">
<a href="https://github.com/justChargin" target="_blank">
<Icon icon="akar-icons:github-fill" />
</a>
<a href="https://www.instagram.com/username/" target="_blank">
<Icon icon="akar-icons:instagram-fill" />
</a>
<a href="mailto:emirhansirkeci8#gmail.com" target="_blank">
<Icon icon="cib:gmail" />
</a>
</div>
</div>
</div>
</div>
I replaced normal html element with next/image component. But im facing with responsive issues. Check out the screenshot below.
As you can see, Image component is top of the card-body. How can i place my Image component like others? When i give Image component fixed width and height properties, its stop being responsive. I also tried giving it width height properties that include "100%" value

Answer 1

next/image is rendered inside a span with absolute position. That's why it is overflowing the card-body.
You can fix it by adding some CSS to the card-img-top like the following example:
.card-img-top {
position: relative;
height: 200px;
}
Or you can override some CSS properties for the rendered next/image HTML elements:
.card-img-top span,
.card-img-top span img {
position: static !important;
}
.card-img-top span img {
height: auto !important;
}
Stackblitz example