如何将下一个/图像组件设置为 100% 高度答案

【问题标题】：How to set the next/image component to 100% height如何将下一个/图像组件设置为 100% 高度
【发布时间】：2021-03-18 00:48:26
【问题描述】：

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

我尝试了以下方法：

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

这个sn-p编译成功，但是在前端，我看到如下错误：

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

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

【问题讨论】：

标签： javascript reactjs next.js nextjs-image

【解决方案1】：

这对我有用：

<div style={{width: '100%', height: '100%', position: 'relative'}}>
  <Image
    alt='Mountains'
    src='/mountains.jpg'
    layout='fill'
    objectFit='contain'
  />
</div>

【讨论】：

是的，Image 的父级必须具有relative 属性。
您正在设置 height 和 width 的绝对值，但问题以百分比表示

【解决方案2】：

<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"/>

【讨论】：

【解决方案3】：

我认为还可以像这样在 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

【讨论】：

【解决方案4】：

这里有一个方法：例如，我想要一个覆盖其容器的整个宽度和高度的图像，它是一个 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
}

【讨论】：

这是我为远距离图像找到的最佳解决方案之一。对于本地图像，它更容易，但对于动态加载的图像，这个解决方案就像一个魅力。

【解决方案5】：

<Image src='/images/wipster-medialibrary-1.png' width="100%" height="100%" layout="responsive" objectFit="contain"></Image>

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

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

【讨论】：

如果使用“填充”，您需要将父级定位为“相对”

【解决方案6】：

如果您不想对高度和宽度使用绝对值，即 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

【讨论】：