如何让Next.js Image组件表现得像普通<img>标签？

要实现普通<img>标签那样的自适应效果（宽度100%，高度随自身宽高比自动调整），你需要调整Image组件的配置和样式，核心是放弃fill属性的使用，改用直接控制图片尺寸的方式：

方案一：无容器直接使用Image组件 #

<Image
  src={post.feature_image}
  alt={post.title}
  width={1200} // 替换为你的图片实际宽度（像素值）
  height={800} // 替换为你的图片实际高度（像素值）
  sizes="100vw"
  className={styles.featureImg}
/>

对应的CSS样式：

.featureImg {
  width: 100%;
  height: auto;
}

方案二：带容器（如需额外样式） #

如果需要容器添加边框、内边距等样式，只需移除容器的固定高度：

<div className={styles.featureImgContainer}>
  <Image
    src={post.feature_image}
    alt={post.title}
    width={1200}
    height={800}
    sizes="100vw"
    className={styles.featureImg}
  />
</div>

CSS样式：

.featureImgContainer {
  width: 100%;
  /* 移除固定height，让图片高度决定容器高度 */
}

.featureImg {
  width: 100%;
  height: auto;
}

适配未知图片尺寸的情况 #

如果无法提前获取图片实际宽高，可用占位值配合样式覆盖：

<Image
  src={post.feature_image}
  alt={post.title}
  width={1}
  height={1}
  sizes="100vw"
  style={{ width: '100%', height: 'auto' }}
/>

问题根源说明 #

你之前用fill属性时，容器的固定高度会强制Image填充该高度空间，object-fit: contain为维持宽高比，只能压缩宽度或留出上下留白。放弃fill后，让Image组件遵循普通图片的尺寸逻辑，通过width:100%和height:auto实现自适应，size="100vw"则告诉浏览器图片在视口内始终占满宽度。

内容的提问来源于stack exchange，提问作者Aleister Crowley