CSS / max-width, height로 반응형 웹디자인을 위한 이미지 스타일링 하기

CSS

작성일 2026-10-27 최근 수정일 2026-10-27

이미지가 부모 영역보다 넓어지지 않게 하려면 max-width: 100%, 원래 가로·세로 비율을 유지하려면 height: auto를 함께 지정합니다. 이 조합은 큰 이미지를 좁은 화면에 맞춰 줄이면서, 작은 이미지를 필요 이상으로 확대하는 것을 피할 때 유용합니다.

연습용 이미지 파일 준비하기

이미지 파일이 없어서 예제를 실행하지 못하는 일이 없도록 간단한 SVG 그림을 함께 제공합니다. 원과 삼각형이 있어 비율이 바뀌었는지 확인하기 쉽습니다. 이 연습용 SVG는 상자의 비율 변형을 그대로 보여 주도록 preserveAspectRatio="none"을 사용합니다.

아래 코드를 텍스트 편집기에 붙여 넣고 sample.svg라는 이름으로 저장합니다. 기본 크기는 640×360이며 비율은 16:9입니다.

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360"
     viewBox="0 0 640 360" preserveAspectRatio="none">
  <rect width="640" height="360" fill="#dceefa" />
  <circle cx="490" cy="90" r="50" fill="#f6bd4f" />
  <path d="M0 360 L210 120 L400 360 Z" fill="#168b85" />
  <path d="M260 360 L450 180 L640 360 Z" fill="#215d8a" />
</svg>

전체 예제: max-width와 height 함께 적용하기

다음 코드를 responsive-image.html로 저장합니다. 앞에서 만든 sample.svg와 같은 폴더에 둡니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>이미지의 비율 유지하기</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; }
    .frame { width: 100%; max-width: 900px; padding: 12px;
      border: 2px solid #6687a5; }
    .responsive { display: block; max-width: 100%; height: auto; }
  </style>
</head>
<body>
<h1>이미지의 비율 유지하기</h1>
<div class="frame">
  <img class="responsive" src="sample.svg" width="640" height="360"
       alt="연한 파란 배경에 노란 원과 초록·파란 삼각형을 배치한 연습용 그림">
</div>
</body>
</html>

HTML 파일을 브라우저에서 열고 창을 넓혔다가 좁혀 봅니다. 이미지가 보이지 않으면 두 파일의 이름·확장자·폴더 위치부터 확인합니다.

화면이 넓으면 그림은 기본 너비인 640px로 보이고, 부모의 안쪽 공간이 640px보다 좁아지면 그 공간에 맞게 축소됩니다. 높이도 16:9 비율로 함께 줄어들어 노란 원이 원 모양을 유지합니다. 예를 들어 실제 이미지 너비가 320px이면 높이는 180px입니다. 개발자 도구에서 이미지의 실제 표시 너비·높이를 확인할 수 있습니다.

HTML의 width와 height는 파일의 원래 비율과 맞게 남겨 두었습니다. 이 정보는 이미지가 로드되기 전 필요한 공간을 계산하는 데도 도움이 됩니다. CSS의 height: auto는 화면에 표시되는 높이를 너비에 맞춰 계산하게 하므로, HTML 높이 속성이 있다는 이유만으로 속성을 무조건 삭제할 필요는 없습니다.

width: 100%와 max-width: 100%의 차이

max-width는 최대 너비의 제한입니다. 예제처럼 너비 640px인 이미지에 max-width: 100%만 주면 부모가 더 넓더라도 기본 너비를 유지합니다. 반면 width: 100%를 추가하면 부모의 안쪽 너비를 채우려 하므로 원본보다 커질 수 있습니다. 좁은 화면에서는 두 설정의 결과가 같아 보여도 넓은 화면에서는 다릅니다.

예제의 responsive 규칙에 width: 100%만 추가한 뒤 넓은 창에서 비교합니다. 부모가 충분히 넓으면 이미지가 640px보다 커집니다. 비교 후 width 선언을 제거하세요. 연습용 SVG는 벡터 그림이지만, 실제 작은 사진을 확대하면 선명도가 떨어질 수 있으므로 “항상 꽉 채우기”와 “원본보다 확대하지 않기” 중 필요한 동작을 선택합니다.

이제 원래 규칙에서 height: auto만 잠시 제거하고 좁은 창에서 확인하세요. width는 제한되지만 HTML의 높이 360px이 남아 이 예제의 그림 비율이 깨집니다. 확인 후 height: auto를 되돌립니다. display: block은 이미지가 기본 인라인 기준선에 놓일 때 생길 수 있는 아래쪽 간격을 없애기 위한 것으로, 비율을 유지하는 핵심 설정과는 역할이 다릅니다.

인라인 높이와 고정된 부모 크기 점검하기

기존 글이나 편집기가 style="height: 360px"처럼 인라인 높이를 넣었다면 일반 스타일시트의 height: auto보다 그 높이가 우선할 수 있습니다. 먼저 원본 HTML에서 불필요한 고정 높이를 없애거나 auto로 수정하세요. 소스를 직접 고칠 수 없는 제한된 구역에서만 다음처럼 범위를 좁힌 재정의를 검토할 수 있습니다.

.article-content img {
  max-width: 100%;
  height: auto !important;
}

article-content는 예시 컨테이너 이름입니다. 실제 부모 선택자로 바꾸어 적용하고, 아이콘·로고·일정한 높이의 썸네일까지 함께 바뀌지 않는지 확인합니다. 인라인 선언 자체에 !important가 있거나 다른 강한 규칙이 있다면 같은 방식으로 해결된다고 단정할 수 없으므로 개발자 도구에서 적용 우선순위를 확인해야 합니다.

이미지는 줄어들었는데 페이지가 가로로 넘치면 부모의 고정 너비, 이미지의 min-width, 테두리·padding을 함께 살펴보세요. max-width: 100%는 모든 조상 영역을 반응형으로 바꾸는 설정이 아닙니다. 또한 CSS로 표시 크기를 줄여도 내려받는 원본 파일의 용량이 자동으로 줄지는 않습니다. 큰 사진의 전송량까지 조절하려면 적절한 파일 크기와 srcset·sizes 같은 이미지 선택 기능을 별도로 검토합니다.

너비 제한은 MDN의 max-width 설명, 자동 높이는 height 설명, 이미지 크기 속성과 로딩 공간은 img 요소 설명을 참고할 수 있습니다.

CSS