Next.JS Image `layout='fill'`已损坏

bwitn5fc 于 2023-08-04 发布在其他

关注(0)|答案(3)|浏览(145)

当使用Next.js图像组件时，文档声称：填充时，图像将根据父元素的尺寸拉伸宽度和高度，通常与对象匹配配对。
然而，这不是正在发生的事情。它实际上做的是填充图像，以占据整个屏幕在一个固定的位置，不尊重滚动。我已经尝试了img的每个可能的object-fit值，没有一个有效。
若要复制，请创建新的下一个项目并将图像放入公用文件夹中。这样做：

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

字符集
图像将占据整个屏幕。您可以尝试样式化Image组件，但我还没有找到使其工作的方法。
有谁知道如何解决这个问题，或者为什么会这样？

next.js

来源：https://stackoverflow.com/questions/67421778/next-js-image-layout-fill-is-broken

3条答案

按热度按时间

h9a6wy2h1#

Package 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（初始值）之外的任何位置值的最近祖先元素。

赞(0）回复(0）举报 2023-08-04

qyzbxkaa2#

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

赞(0）回复(0）举报 2023-08-04

vpfxa7rd3#

如果你使用的是nextjs 13，那么就使用下面的代码：

<div className="relative rounded-md h-full p-3 border-2">
    <Image
        src={"../../../src.png"}
        width="0"
        height="0"
        sizes="100vw"
        className="w-full h-auto"
    />
</div>

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

Next.JS Image `layout='fill'`已损坏

3条答案

相关问题

热门标签

最新问答