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

Question

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

我尝试了以下方法：

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

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

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

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

Answer 1

这对我有用：

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

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

Answer 3

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

Answer 4

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

Answer 5

它适用于 next.js 图像组件

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

Answer 6

<img alt="" src="https://some/image/uri" loading="lazy" />

在 NextJS 中

<div>
  <Image
    alt=""
    src="https://some/image/uri"
    width="100%"
    height="100%"
    layout="fill"
    objectFit="contain"
  />
</div>

Answer 7

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

我尝试了以下方法：

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

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

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

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

Answer 8

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

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

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

Answer 9

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

Answer 10

上述变体对我没有任何帮助，但我尝试以另一种方式解决问题，它对我有用：

const [imageSize, setSmageSize] = useState({
  width: 1,
  height: 1
 });
    
<Image
  src={imgPath}
  layout="responsive"
  alt={alt}
  priority={true}
  onLoadingComplete={target => {
    setSmageSize({
      width: target.naturalWidth,
      height: target.naturalHeight
    });
  }}
  width={imageSize.width}
  height={imageSize.height}
/>

如果没有帮助，请尝试设置 objectFit="contain like exmpl"

Answer 11

为我工作

<div
  style={{
    display: 'flex',
    flexDirection: 'column',
    height: 'auth',
    maxHeight: 343,
    position: 'relative'
  }}
>
  <Image
    src={`<YOU_IMAGE>`}
    alt="thumbnail"
    width="100%"
    height="100%"
    layout="responsive"
  />
</div>

Answer 12

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

Answer 13

对我来说，在导入图像并将其从public移开后， Next 13工作正常：

前

<Image src='/link-to-public/img.png' alt="topmoto.pro" />

后

import img from "../assets/img.png";
...
<Image src={img} alt="topmoto.pro" />

Answer 14

也许这些其他答案适用于不同的 NextJS 版本，但它们都不适合我。

我正在使用 NextJS v13.0.0

为了实现这一点，我有以下 JSX（使用 TailwindCSS，应该很容易转换为 vanilla CSS）：

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

这里的重要部分是使父 div 的position: relative （并将其高度/宽度设置为您想要的图像）并设置fill={true} 。 我从 NextJS Image 文档中得到了这个：

一般图像文档： https ://nextjs.org/docs/api-reference/next/image

关于fill属性的文档： https ://nextjs.org/docs/api-reference/next/image#fill

希望这对某人有帮助！

Answer 15

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

在样式表添加的地方

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

顺便说一句，当它的少量图像变得不清楚时，我为宽度和高度添加了 1000。 并认为您可以为 nextImg class 添加自己的 styles

Answer 16

在接下来的 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!
  />

感谢@Abílio Soares Coelho

Answer 17

如果有人使用带有样式组件的 NextJS。 有用：

 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>