如何将next/image组件设置为100%的高度。

Question

我有一个Next.js应用程序，需要一张图片来填充其容器的全部高度，并根据其宽高比自动决定其宽度。

我已经尝试了以下方法：

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

这段代码编译成功了，但在前端页面上我看到了以下错误：

错误：使用“/deco.svg”的图片必须使用“width”和“height”属性或“unsized”属性。

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

- Jake

---

我认为如果不将img位置设置为相对位置，或者将容器的padding从上部改为左部，这是不可能实现的。 - Piet van Leeuwen

你正在使用哪个版本的Next.js？ - akds

Answer 1

这是对我有效的方法。

使用next/image：

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

并且配合 next/future/image 使用：

<Image
    fill
    alt='Mountains'
    src='/mountains.jpg'
    sizes='100vw'/>

next/future/image

- francis

---

是的，Image的父元素必须具有relative属性。 - Asad S

你正在设置高度和宽度的绝对值，但问题说明是以百分比为单位。 - Hussam Khatib

我只是想在这个答案中补充一些内容，在我的情况下，我需要将图像对齐到左侧，您可以添加属性objectPosition="left"；它会传递给CSS的object-position: "left"； 更多信息请参见-https://developer.mozilla.org/en-US/docs/Web/CSS/object-position - Piltsen

这是完美的解决方案。对于那些在带有文本内容的卡片上尝试此操作的人，应将图像容器与文本容器分开，并仅将“position: relative”添加到图像容器中，以便它不会重叠整个内容。 - Victor Eke

请查看 next/future/image 的 fill 布局模式，该模式会使图像填充父元素。 - francis

使用新的 next/image，fill 会导致设置 object-fit: fill 样式。这需要在 <Image style={{objectFit: 'contain'}} /> 中进行覆盖。 - pilotpin

Answer 2

在2023年，所有上述解决方案都已被弃用， 请使用以下解决方案。

<Image
  src="url"
  width={0}
  height={0}
  sizes="100vw"
  style={{ width: '100%', height: 'auto' }} // optional
/>

Github: https://github.com/vercel/next.js/discussions/18474#discussioncomment-5501724

Github：https://github.com/vercel/next.js/discussions/18474#discussioncomment-5501724

- Nisharg Shah

---

这对我来说是最好的或唯一的解决方案。 - Jacob

不需要 sizes="100vw" 属性，可以将其删除。style 属性是必需的，而非可选的。 - Mohit Atray

这是一个警告：“具有src "/images/...png"的图像已经修改了宽度或高度，但另一个参数没有被修改…” - NineCattoRules

当我省略了sizes="100vw"时，在开发中我的图片无法加载。它们看起来模糊，就像部分懒加载一样。添加这个属性/值对使得图片能够完全加载。 - Daryl Wright

这个答案需要更多的赞同票 - Gabriel Arghire

Answer 3

<img src="/path/to/image.jpg" alt="" title="" />

在 NextJS 12 及以下版本中

<Image src="/path/to/image.jpg" alt="" title="" width="100%" height="100%" layout="responsive" objectFit="contain"/>

- Muhammet Can TONBUL

---

100%不是有效的宽度 - 错误：具有src的图像具有无效的“width”属性。期望以像素为单位的数字值，但接收到“100％”。 - Oly Dungey

是的，你说得对。使用NextJS 13进行了覆盖。我希望能找到解决方案并更新我的答案。@OlyDungey - Muhammet Can TONBUL

Answer 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
}

- Peyman Baseri

---

这是我发现的最佳远程图像解决方案之一。对于本地图像来说，它更加简单，但对于动态加载的图像，这个解决方案非常有效。 - GRosay

我在这里找到的解决方案都对我无效。 - Hugo

不需要图像元素的相对位置，因此您可以将其删除！ - Ali Radmanesh

@AliRadmanesh 如果没有它，我的布局就崩溃了。 - kevin11

Answer 5

在接下来的v13版本中

       <Image
        src={src}
        width={200}
        height={160}
        alt={alt}
        sizes="(max-width: 768px) 100vw,
              (max-width: 1200px) 50vw,
              33vw"
        style={{ height: '100%', width: '100%' }} //The point is right there!
        //OR className='w-100 h-100'
      />

感谢 @Abílio Soares Coelho

- Behzad

---

你能解释一下这里发生了什么吗？ - Alauddin Ahmed

@AlauddinAhmed 它以正确的方式使图像保持纵横比。 - Behzad

Answer 6

我认为可以在图像元素中添加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找到。

- Sonu Nigam

Answer 7

也许其他的回答适用于不同的 NextJS 版本，但对我来说都没有用。

我正在使用 NextJS v13.0.0。

要实现这个目标，我有以下的 JSX 代码（使用 TailwindCSS 编写，转换为普通 CSS 应该很容易）：

<div className="h-screen relative">
  <Image
   src="/image.png"
   alt="pic of dog"
   fill={true}
  />
</div>

重要的部分是使父级div的position: relative（并将其高度/宽度设置为所需的图像大小）并设置fill={true}。我从NextJS图像文档中获得了这些信息：

一般的图像文档：https://nextjs.org/docs/api-reference/next/image 有关fill属性的文档：https://nextjs.org/docs/api-reference/next/image#fill 希望这能帮助到某些人！

- deadbird11

---

不得不提到固定高度，百分比对我来说不起作用。这个解决方案有效，谢谢 :) - Sai Teja T

Answer 8

    <Image
    src="/deco.svg"
    alt="alternative text"
    fill
    style={{height: "100%", width:"100%"}}
    />

- Abílio Soares Coelho

Answer 9

<Image
    src="/deco.svg"
    alt=""
    width={1000}
    height={1000}
    className='nextimg'
/>

在您的样式表中添加以下内容：

.nextimg{
  width: 100%;
  height: auto;
}

顺便提一下，我在宽度和高度上加了1000个像素，当图片较小时，会导致图像模糊不清。我认为你可以为nextImg类添加自己的样式。

- vimuth

Answer 10

这是在Next 13.5中与next/image一起使用的内容。

width={0}
height={0}
sizes="100vw"
style={{ width: 'auto', height: '50px' }}

- soda