如何让NextJS Image组件实现父div的100%宽高填充

问题场景 #

开发过程中NextJS的Image组件默认配置无法实现和原生img标签一致的填充表现，目标是让Image达到原生img设置width:100%、height:100%、object-fit:cover时的铺满容器效果。

初始错误写法复现 #

<div style={{ width: "100vw", height: "100vh", display: "flex" }}>
  {/* 原生img（参考效果） */}
  <div style={{ width: "50%", height: "100%", background: "red" }}>
    <img
      src="https://t4.ftcdn.net/jpg/03/00/94/69/360_F_300946931_kSR84OqudEhsmBZH47HU6ud7aZIDMjEx.jpg"
      alt=""
      style={{ width: "100%", height: "100%", objectFit: "cover" }}
    />
  </div>
  {/* 配置错误的Image组件 */}
  <div style={{ width: "50%", height: "100%", background: "blue" }}>
    <Image
      src="https://t4.ftcdn.net/jpg/03/00/94/69/360_F_300946931_kSR84OqudEhsmBZH47HU6ud7aZIDMjEx.jpg"
      alt=""
      width="1"
      height="1"
      layout="responsive"
      objectFit="cover"
    />
  </div>
</div>

错误写法运行效果：

正确实现方式 #

需要做两处核心调整：

• 给Image组件的直接父容器添加position: relative样式
• 将Image组件的layout属性设置为fill，移除手动配置的width、height属性，保留objectFit="cover"即可

正确代码示例：

{/* 正确配置的Image组件 */}
<div
  style={{
    width: "50%",
    height: "100%",
    background: "blue",
    position: "relative",
  }}
>
  <Image
    src="https://t4.ftcdn.net/jpg/03/00/94/69/360_F_300946931_kSR84OqudEhsmBZH47HU6ud7aZIDMjEx.jpg"
    alt=""
    layout="fill"
    objectFit="cover"
  />
</div>

正确配置后的运行效果：

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