[Nextjs] nextjs 이미지 컴포넌트 비율 맞추기

넥스트js에선 이미지의 비율을 맞추는게 마음처럼 되지 않는다.

뒤틀린 이미지

요렇게 요상하게 나오는 이미지를 볼 수 있다. 나는 이런 그림을 원하지 않는다. 내킨김에 공식문서를 차분하게 읽은 다음 적용을 해보았다. 

그리고 아래와 같이 코드를 작성해주었다. 

 

          <ImageWrapper>
            <Image
              src={imgUrl}
              alt="Thumbnail of article"
              layout="fill"
              objectFit="cover"
              placeholder="blur"
              blurDataURL={blurDataURL}
            />
          </ImageWrapper>

		...

        const ImageWrapper = styled.div`
          width: 320px;
          height: 200px;
          position: relative;
        `;

 

우선 layout="fill"을 적용해준다음, objectFit 속성을 적용한다. objectFit은 말그대로 우리가 css에서 사용하던 그 object-fit이다. 나는 cover를 원했기 때문에 cover를 적용했다. 

 

그리고 내가 원하는 이미지의 사이즈를 저 이미지를 덮어주는 태그에 넣어줬다. 이때 position : relative를 넣어줘야 정상적으로 이미지가 나온다.

 

적용 결과는 위와 같다. 내가 원하는대로 이미지가 비율을 지키면서 나온다.