가변 이미지 기초 — img가 부모 영역을 넘치는 문제와 해결

 

 

Web Development · Fluid Image

가변 이미지 기초 — img가 부모를 뚫고 나가는 이유

img 기본 동작 · max-width:100% · height:auto · 가변 그리드와 충돌

시작 오늘 분석할 코드

레이아웃은 가변으로 잘 만들었는데, 본문에 큰 이미지를 하나 넣으니 갑자기 깨진다. 이미지가 본문 영역을 뚫고 사이드바를 밀어내거나 화면 밖으로 삐져나간다. 이번 코드는 그 문제 상황 자체를 보여주는 예제다.

<section class="content"> <h4>본문</h4> <img src="images/fireworks.png"> <!-- 큰 이미지 — 부모 폭을 넘는다 --> </section>

/* 가변 레이아웃은 잘 짜여있는데 img에는 아무 규칙 없음 */ .content { float:left; width:62.5%; padding:1.5625%; background:#ffd800; } /* img 규칙 없음 → 원본 픽셀 크기 그대로 표시 → 부모 영역 무시 */

실제 출력 미리보기

문제 — img 규칙 없음 (원본 크기 800px 그대로)

FIREWORKS · 800px

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

FIREWORKS · 부모에 맞게 자동 축소

용어 용어 정리

img 기본원본 픽셀 크기로 표시 (부모 무시)

max-width최대 너비 — 그 이상으로 안 커짐

max-width:100%부모 폭을 절대 안 넘음

height:auto너비 변할 때 비율 유지

aspect-ratio가로:세로 비율 명시 (모던 속성)

overflow부모 밖 콘텐츠 처리 방법

레이아웃 시프트로딩 중 이미지 크기 바뀌어 콘텐츠 밀림

반응형 이미지화면에 맞게 크기·해상도 조정

---

1 img의 기본 동작 — 원본 크기 그대로

<img>는 HTML 인라인 요소지만, 크기는 자기 원본 픽셀 크기를 그대로 쓴다. 부모가 100px이든 1000px이든 신경쓰지 않고 자기 크기로 박힌다. 그래서 가변 레이아웃 안에서 이미지 한 장이 전체 그리드를 깨뜨릴 수 있다.

[부모 .content 폭이 화면 따라 변함] ┌────── 가변 폭 ──────┐ │ ┌──────────────────────────┐ ← img는 800px 고정 │ │ fireworks.png 800px │ 부모 영역 무시하고 │ └──────────────────────────┘ 사이드바를 밀어버림 └────────────────────────┘

---

2 만능 해결 — img { max-width:100%; height:auto }

이 두 줄이 가변 이미지의 표준 처방이다. 어떤 이미지를 넣어도 이 규칙이 있으면 부모 영역을 넘지 않는다.

img { max-width: 100%; /* 부모 폭을 절대 넘지 않음 */ height: auto; /* 너비가 줄어들면 높이도 비율 유지 */ }

속성	의미	없으면?
max-width: 100%	부모보다 클 때 부모 폭으로 줄임	큰 이미지가 부모 뚫고 나감
height: auto	너비 줄어들면 비율대로 같이 줄어듦	너비만 줄고 높이는 그대로 → 찌그러짐
둘 다	이미지가 부모 안에서 비율 유지하며 가변	—

---

3 width:100%와의 차이

width:100%는 항상 부모 폭에 맞춘다 — 원본보다 작은 이미지를 강제로 늘림으로 흐려질 수 있다. max-width:100%는 부모보다 클 때만 줄이고, 작으면 원본 그대로다.

width: 100%

부모가 800px인데 이미지 200px? 강제로 800px로 늘림 → 흐려짐

max-width: 100%

부모가 800px인데 이미지 200px? 그대로 200px 유지 → 선명

---

 

반응형

 

4 aspect-ratio — 모던한 비율 보존

2021년쯤부터 모든 주요 브라우저가 지원하는 aspect-ratio 속성으로 비율을 명시할 수 있다. 이미지가 로딩되기 전에도 자리를 잡아둘 수 있어 레이아웃 시프트(이미지 로드 후 콘텐츠가 갑자기 밀리는 현상)가 사라진다.

img { max-width: 100%; height: auto; aspect-ratio: 16 / 9; /* 또는 4 / 3, 1 / 1 등 */ }

---

5 부모에 overflow:hidden을 줘서 자르는 방법

이미지 자체에 손대지 못하는 상황(외부 위젯 등)에서는 부모에 overflow:hidden을 줘서 삐져나간 부분을 잘라버릴 수 있다. 다만 이건 응급처방이지 정답이 아니다.

※ overflow:hidden은 "안 보이게 잘라낸다"일 뿐, 이미지가 여전히 부모 영역을 차지한다. 옆 사이드바가 밀리는 문제는 안 풀린다. img 자체를 max-width:100%로 막는 게 정답이다.

---

6 자주 하는 실수

실수	증상	해결
img 규칙 없음	큰 이미지가 부모 뚫고 나감	img { max-width:100%; height:auto; }
height: auto 누락	너비만 줄고 세로는 그대로 → 찌그러짐	height:auto 함께
모든 img에 width:100%	작은 아이콘도 강제로 커져서 흐려짐	max-width로 변경
img에 width·height HTML 속성	CSS와 충돌 가능	HTML 속성은 비율용으로만
aspect-ratio 없이 height auto	로딩 시 레이아웃 시프트	aspect-ratio 명시 또는 width·height 속성
img를 inline이라 인식 못 함	주변 텍스트 baseline 어긋남	img { display: block; } 또는 vertical-align

---

7 실무 권장 — 모든 프로젝트의 기본 css

/* 거의 모든 프로젝트에 들어가는 4줄 */ img, picture, video, svg { display: block; /* baseline 정렬 문제 제거 */ max-width: 100%; /* 부모 안에 가두기 */ height: auto; /* 비율 유지 */ }

---

핵심 한 줄 요약

img 기본원본 픽셀 크기 — 부모 무시

max-width:100%부모 폭 안에 가두기

height:auto너비 변할 때 비율 유지

width vs max-widthwidth은 강제 / max-width는 상한선

aspect-ratio로딩 전 자리 잡아두기 — 모던 속성

overflow:hidden응급처방 — 근본 해결 X

권장 4줄img, picture, video, svg에 일괄 적용

Tags

#가변이미지 #fluid-image #max-width #height-auto #img #aspect-ratio #overflow #반응형이미지 #비율유지 #picture #svg #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

가변이미지, fluid-image, max-width, height-auto, img, aspect-ratio, overflow, 반응형이미지, 비율유지, picture, svg, CSS, HTML, 웹개발, 티스토리