부모 가로에 맞춰 커지고, 비율을 유지하는 <Image /> 패턴

목표

• 부모의 가로(width)에 맞춰 커지되, 세로는 원본 비율 유지

• fill은 부모에 높이/비율이 없으면 안 보일 수 있으므로 이번 요구엔 사용하지 않는 게 맞다

---

sizes 속성

sizes="(max-width: 448px) 100vw, 448px"

• (max-width: 448px) 100vw
  화면이 448px 이하일 땐 이미지를 화면 너비(100vw) 만큼 쓰게 된다
• 448px
  그보다 넓을 땐 이미지는 최대 448px까지만 쓴다

즉, 작은 화면에선 꽉 차게, 큰 화면에선 448px까지만.
브라우저는 이 힌트를 보고 srcset 중 딱 맞는 해상도만 다운로드하므로 불필요하게 큰 이미지를 받지 않는다.

---

전체 코드

import Image from "next/image";

export default function Scene() {
  return (
    <main className="max-w-4xl mx-auto bg-global">
      <figure className="w-full">
        <Image
          src="/images/scene1.jpg"
          alt="청월아씨 등장씬"
          width={0}
          height={0}
          sizes="(max-width: 448px) 100vw, 448px"
          className="w-full h-auto"
          quality={100}
          priority
        />
      </figure>
    </main>
  );
}

• 레이아웃이 max-w-4xl이면 컨테이너 최대폭이 448px이므로 sizes 마지막 값을 448px로 둔다

• 컨테이너가 다르면 마지막 값을 그 픽셀로 바꾸면 된다

  • 예) max-w-md(≈ 448px) → sizes="(max-width: 448px) 100vw, 448px"