Next.JS 图片`layout='fill'` 坏了

Question

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

但是，这根本不是它的作用。它实际上所做的是填充图像以在不考虑滚动的固定位置占据整个屏幕。我已经为img 样式尝试了单个object-fit 值，但没有任何效果，因此组件按预期填充父级。这个问题当然与 Image 组件被包裹在 div 中这一事实有关，而该 div 无法在 React 应用程序中设置样式。

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

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

图像将占据整个屏幕。您可以尝试设置 Image 组件的样式，也许我缺少一些东西。

有谁知道如何解决这个问题，或者为什么会这样？这个功能是不是完全坏掉了？

Answer 1

您需要使用position: relative 作为父元素。

Answer 2

包装的 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（初始值）之外，具有任何位置值。