26

我有一个 Next.js 应用程序，我需要一个图像来填充其容器的整个高度，同时根据其纵横比自动确定其宽度。

我尝试了以下方法：

<Image
    src="/deco.svg"
    alt=""
    layout="fill"
/>

此代码段编译成功，但在前端，我看到以下错误：

错误：带有 src "/deco.svg" 的图像必须使用 "width" 和 "height" 属性或 "unsized" 属性。

这让我很困惑，因为根据文档，使用时不需要这些属性layout="fill"。

4

7 回答 7

38

这对我有用：

<div style={{width: '100%', height: '100%', position: 'relative'}}>
  <Image
    alt='Mountains'
    src='/mountains.jpg'
    layout='fill'
    objectFit='contain'
  />
</div>
于 2021-02-23T09:59:18.117 回答
8 
<img src="/path/to/image.jpg" alt="" title="" />

在 NextJS 中

<Image src="/path/to/image.jpg" alt="" title="" width="100%" height="100%" layout="responsive" objectFit="contain"/>
于 2021-09-16T06:38:51.993 回答
5

我认为还可以像这样在 Image 元素上提供 object-fit 属性：-

<Image
    alt="Mountains"
    src="/mountains.jpg"
    layout="fill"
    objectFit="cover"
  />

Nextjs 提供的示例可以是https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/layout-fill.js

于 2020-12-06T15:31:17.410 回答
5

这是一种方法：例如，我想要一个覆盖其容器的整个宽度和高度的图像，该容器是一个 div。

<div className={'image-container'}>
  <Image src={path} layout="fill" className={'image'} />
</div>

这是样式：（有一个容器 div 占据视口的一半宽度和高度，我的图像将覆盖它。）

// Nested Styling
.image-container {
    width: 50vw;
    height: 50vh;
    position: relative;

    .image {
        width: 100%;
        height: 100%;
        position: relative !important;
        object-fit: cover; // Optional
    }
}

// Or Normal Styling
.image-container {
    width: 50vw;
    height: 50vh;
    position: relative;
  }
.image-container .image {
    width: 100%;
    height: 100%;
    position: relative !important;
    object-fit: cover; // Optional
}
于 2021-08-18T20:21:08.273 回答
3 
<Image src='/images/wipster-medialibrary-1.png' width="100%" height="100%" layout="responsive" objectFit="contain"></Image>

为我工作，假设您希望图像适合父容器。

不要使用 layout='fill' 它实际上只是出于某种原因使图像适合整个屏幕。

于 2021-11-21T10:19:26.960 回答
0

如果您不想对高度和宽度使用绝对值，即 px 等，您可以执行以下操作

    <div style={{ position: "relative", width: "100%", paddingBottom: "20%" }} >
  <Image
    alt="Image Alt"
    src="/image.jpg"
    layout="fill"
    objectFit="contain" // Scale your image down to fit into the container
  />
</div>

原始来源 https://stackoverflow.com/a/66358533/12242764

于 2021-11-28T10:49:51.067 回答
0 
If someone use NextJS with styled components. It works:

 const Container = styled.div`
  width: 100%;

  div, span {
    position: unset !important;
  }

  .image {
    object-fit: contain;
    width: 100% !important;
    position: relative !important;
    height: unset !important;
  }
`;

      <Container>
            <Image src={ src }
                   layout="fill"
                   className={ "image" }          
            />
        </Container>
于 2022-03-05T10:44:46.643 回答