Next.JS 图像 `layout='fill'` 已损坏

Question

当使用 Next.js 图像组件时，文档声称：“填充时，图像将宽度和高度拉伸到父元素的尺寸，通常与 object-fit 配对。”

然而，事实并非如此。它实际上所做的是填充图像以在不考虑滚动的固定位置占据整个屏幕。我已经尝试了所有object-fit可能的值img，但没有一个有效。

要重现，请创建一个新的下一个项目并将图像放入您的公共文件夹中。做这个：

export default function Home() {
  return (
    <div>
      <div style={{width: '100px', height: '100px'}}>
        <Image src={"/i.png"} layout='fill'/>
      </div>
    </div>
  )
}

图像将占据整个屏幕。您可以尝试设计该Image组件的样式，但我还没有找到使其工作的方法。

有谁知道如何解决这个问题，或者为什么会发生这种情况？

Answer 1

包装 div 应该有position: relative：

export default function Home() {
  return (
    <div>
      <div style={{width: '100px', height: '100px', position: 'relative'}}>
        <Image src={"/i.png"} layout='fill'/>
      </div>
    </div>
  )
}

这是运作方式的结果position: absolute。static它的包含块将是具有除（初始值）之外的任何位置值的最近的祖先元素。

Answer 2

您需要用于position: relative父元素。