<Image />에 absolute 적용 시 원하는 크기가 안 나올 때

1. 문제 상황

Next.js에서 next/image 컴포넌트에 absolute를 직접 줬더니,
이미지가 섹션 전체 기준으로 배치되지 않고 이상한 크기/위치로 표시됨.

<section className="relative w-full h-[652px] bg-gray-100">
  <Image
    src="/images/cheongwol.svg"
    alt="청월아씨"
    width={298}
    height={500}
    className="absolute bottom-0 right-0" // ❌ 기대와 다르게 배치됨
  />
</section>

증상

• 이미지가 섹션 전체에 딱 붙지 않고, 이상하게 작거나 위치가 꼬임.
• absolute인데도 내가 기대한 부모 기준으로 안 맞음.
• 내가 설정한 크기대로 이미지가 안 나옴.

---

2. 원인 분석

next/image는 단순히 <img>만 렌더링하지 않고,
자동 최적화를 위해 숨겨진 래퍼 <span>을 하나 더 만든다.

<span style="position: relative; display:inline-block; width:298px; height:500px">
  <img src="/images/cheongwol.svg" ... />
</span>

• 이 <span>이 position: relative를 가지고 있음.
• 그래서 <img>에 준 absolute는 섹션이 아니라 이 span 래퍼를 기준으로 잡힘.
• 결과적으로, 크기와 위치가 원하는 대로 안 나오는 것.

---

3. 해결 방법

방법 A: 감싸는 div에 absolute 적용

<section className="relative w-full h-[652px] bg-gray-100">
  <div className="absolute bottom-0 right-0">
    <Image
      src="/images/cheongwol.svg"
      alt="청월아씨"
      width={298}
      height={500}
      className="drop-shadow-lg"
    />
  </div>
</section>

• 이제 absolute는 div에 적용됨.
• div는 섹션의 자식이므로 → 섹션 기준 배치가 정확히 됨.
• <Image />는 div 안에서만 크기 계산하니 정상 표시.

---

방법 B: fill + 부모 크기 지정

<section className="relative w-full h-[652px] bg-gray-100">
  <div className="absolute bottom-0 right-0 w-[298px] h-[500px] relative">
    <Image
      src="/images/cheongwol.svg"
      alt="청월아씨"
      fill
      className="object-contain drop-shadow-lg"
    />
  </div>
</section>

• fill 옵션을 쓰면 부모 div를 꽉 채우는 이미지가 됨.
• 부모 div에 w/h를 지정해야 하고, relative도 필요.
• object-contain으로 원본 비율 유지 가능.

---

4. 요약

• 문제: <Image class="absolute"> → 숨은 래퍼(span)를 기준으로 잡혀서 꼬임

• 원인: next/image가 자동으로 감싸는 <span>이 relative를 갖기 때문

• 해결:

  1. div로 감싸고 그 div에 absolute 적용
  2. 또는 fill 모드 + 부모 크기 지정