I have been grappling with this issue for hours and I'm at a loss for what to do next.
Here is how my Image component is wrapped:
<div className={styles.featureImgContainer}>
<Image
src={
post.feature_image
}
alt={post.title}
fill
className={styles.featureImg}
/>
</div>
and here is the associated styling:
.featureImgContainer {
position: relative;
width: 100%;
height: 500px;
}
.featureImg {
object-fit: contain;
}
The issue arises when the image does not take up the full width of the container due to the constrained height, maintaining its aspect ratio. This results in unnecessary margins on top and bottom.
As I resize the viewport, the image eventually spans the full width but creates additional unwanted space above and below:
https://i.sstatic.net/NBfHo.png
Removing or setting the height of the image container to auto causes the image to disappear. Ideally, I would like the image and container to always be at 100% width with automatic height adjustment.
Typically, using a regular < img > tag within an unspecified height container with 100% width adjusts the image height automatically while maintaining aspect ratio without white space.
How can I achieve similar behavior with the Next.js Image component? I want to simply insert my image with or without a container, specifying only the desired width (100% in this case).