다음/이미지 컴포넌트 높이를 100%로 설정하는 방법

다음/이미지 컴포넌트 높이를 100%로 설정하는 방법

Next.js 앱을 가지고 있는데, 가로세로 비율에 따라 자동으로 너비를 결정하면서 컨테이너의 전체 높이를 채우는 이미지가 필요합니다.

다음을 시도했습니다.

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

이 스니펫은 정상적으로 컴파일 되었습니다만, 프런트 엔드에 다음의 에러가 표시됩니다.

오류: src "/deco.svg"의 이미지는 "width" 및 "height" 속성 또는 "unsize" 속성을 사용해야 합니다.

문서에 따르면 이러한 속성은 사용할 때 필요하지 않기 때문에 혼란스럽습니다.layout="fill".

이게 나한테 효과가 있었어.

와 함께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'/>

다음/미래/이미지

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

Next JS 12 이하

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

방법은 다음과 같습니다.예를 들어 용기 전체 폭과 높이를 구분한 이미지를 원합니다.

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

Image 요소에 다음과 같은 오브젝트 핏 속성을 제공할 수도 있습니다.

<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를 들 수 있습니다.

높이와 너비에 절대값을 사용하지 않는 경우, 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

나에겐 통한다

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

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

이미지를 Import하여 Next 13에서 이동시킨 후 Next 13은 정상적으로 동작했습니다.public:

전에

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

끝나고

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

다른 답은 NextJs 버전일 수도 있지만, 어느 것도 나에게 통하지 않았다.

NextJS v13.0.0을 사용하고 있다

이를 실현하기 위해 다음 JSX를 사용하고 있습니다(Tailwind CSS를 사용하면 바닐라 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

이게 누군가에게 도움이 되길 바라!

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

스타일시트가 추가하는 장소에

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

그런데 소량 이미지가 불분명해지면 가로와 높이에 1000을 추가했고, nextImg 클래스는 나만의 스타일을 추가할 수 있을 것 같습니다.

스타일 컴포넌트와 함께 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>

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

인넥스트Js

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

그리고 다음 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!
  />

@Ablio Soares Coelho 덕분에

next.js 이미지 컴포넌트에서 사용할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/65169431/how-to-set-the-next-image-component-to-100-height