Nextjs Image 반응형 처리 responsive (tailwind와 함께)

NextJs에서는 <img> 대신 <Image>를 써야 한다.

테일윈드 라이브러리를 함께 써서 반응형 처리를 한 방법을 기록해 본다.

 

방법 

 

예를 들면 모바일에서는 가로 18px 세로 16px인 이미지를 

max-width:768부터는 가로 36px 세로 32px로 보여준다고 하면 

아래와 같이 쓴다.

 

1. <Image>를 감싸는 <div>에 모바일 사이즈 크기와, 바뀌는 점을 기록한다.

2. Image에 기본 width, height값을 쓴다.

layout="responsive" 속성을 꼭 ! 써준다.

 

 <div className="h-[16px] w-[18px] md:h-[32px] md:w-[36px]">
                    <Image
                      width="18px"
                      height="16px"
                      layout="responsive"
                      className="block md:h-[32px] md:w-[36px]"
                      src="/images/icons/icon_about_us_life.svg"
                      alt="icon"
                    />
                  </div>