CSS로 이미지 반응형 만들기: 화면 크기에 맞춰 자동 축소하는 방법

웹 페이지에서 이미지가 데스크톱, 태블릿, 모바일 등 다양한 화면 크기에 맞춰 자동으로 조절되도록 하려면 반응형(responsive) 처리가 필수입니다. 다행히 복잡한 설정 없이 CSS 몇 줄만으로 간단하게 구현할 수 있습니다.

핵심 CSS 속성

이미지를 반응형으로 만드는 가장 기본적인 방법은 max-width와 height 두 가지 속성을 활용하는 것입니다.

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% — 이미지가 부모 요소(컨테이너)의 너비를 초과하지 않도록 제한합니다. 화면이 좁아지면 이미지도 함께 줄어듭니다.
height: auto — 너비가 줄어들 때 원본 이미지의 가로세로 비율(aspect ratio)을 그대로 유지한 채 높이가 자동으로 조절됩니다.

전체 예제 코드

아래는 완전한 HTML 예제입니다. 직접 실행해 보고 브라우저 창 크기를 조절해 보면, 이미지가 화면 너비에 맞춰 자동으로 축소되는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <img src="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg"
       alt="Online Compiler"
       width="300"
       height="300">
</body>
</html>

추가 팁

HTML의 width와 height 속성을 함께 지정해 두면, 브라우저가 이미지를 로드하기 전에 필요한 공간을 미리 확보합니다. 이렇게 하면 이미지 로딩 중 발생하는 레이아웃 밀림 현상(layout shift)을 방지할 수 있어 사용자 경험과 SEO에 모두 도움이 됩니다.

또한 최신 브라우저에서는 aspect-ratio 속성을 사용해 가로세로 비율을 명시적으로 지정하는 방법도 있으니, 더 정교한 반응형 레이아웃이 필요하다면 함께 활용해 보세요.