我已经和这个斗争了几个小时了，我不知道该怎么办。
我有我的图像组件 Package 如下：

<div className={styles.featureImgContainer}>
  <Image
    src={
      post.feature_image
    }
    alt={post.title}
    fill
    className={styles.featureImg}
  />
</div>

字符串
使用以下样式：

.featureImgContainer {
  position: relative;
  width: 100%;
  height: 500px;
}
    
.featureImg {
  object-fit: contain;
}

型
在这种情况下，它不会占用容器的全部宽度，因为容器的高度限制了图像的宽度，因此它可以保持宽高比。
x1c 0d1x的数据
当我缩小viewport时，图像最终采用了整个宽度，但容器的高度导致在顶部和底部创建了不必要的边距：

的
问题是，如果我从图像容器中删除高度或将其设置为自动，图像就会消失。但这正是我想要实现的--让容器和图像的宽度一直保持在100%，并自动调整高度。
对于常规< img >标记，我只需将其放入一个没有指定高度的容器中，并将宽度定义为100%，图像的高度将自动调整以保持宽高比，并且不会出现白色。
如何让Next.js Image组件像这样工作？我只想把我的形象与或没有一个容器，而不必描述任何超过所需的宽度（100%在这种情况下）。