CSS width 속성으로 반응형 이미지 만들기

웹 페이지에서 이미지를 반응형(Responsive)으로 만드는 가장 기본적인 방법은 CSS의 width 속성을 100%로 설정하는 것입니다. 이렇게 하면 이미지가 브라우저 창의 너비에 맞춰 자동으로 크기가 조절되며, height 속성을 auto로 지정하면 원본 이미지의 가로세로 비율이 그대로 유지됩니다.

아래 예제 코드를 실행하여 직접 확인해 보세요.

예제 코드

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
         img {
            width: 100%;
            height: auto;
         }
      </style>
   </head>
   <body>
      <p>효과를 확인하려면 브라우저 창 크기를 조절해 보세요.</p>
      <img src="https://www.tutorialspoint.com/python/images/python-data-science.jpg"
          alt="Python Data Science" width="400" height="300">
   </body>
</html>

코드 핵심 포인트

<meta name="viewport"> : 모바일 기기에서 페이지가 기기 화면 너비에 맞게 렌더링되도록 하는 필수 설정입니다. 반응형 웹 구현 시 반드시 포함해야 합니다.
width: 100% : 이미지가 부모 요소 또는 뷰포트의 전체 너비를 채우도록 하여, 화면 크기에 따라 유동적으로 늘어나고 줄어들게 합니다.
height: auto : 너비가 변할 때 이미지의 종횡비(aspect ratio)가 왜곡되지 않도록 높이를 자동으로 계산해 줍니다.

실무 팁: max-width 활용하기

실제 프로젝트에서는 width: 100% 대신 max-width: 100%를 사용하는 경우도 많습니다. max-width를 사용하면 이미지가 원본 크기보다 확대되는 것을 방지할 수 있어, 작은 이미지가 큰 화면에서 흐릿하게 보이는 현상을 막을 수 있습니다. 즉, 큰 화면에서는 원본 크기를 유지하고 작은 화면에서만 축소되는 더 안정적인 반응형 동작을 구현할 수 있습니다.