반응형 이미지 처리 방법: object-fit과 aspect-ratio

반응형 이미지 처리 정리

(object-fit · aspect-ratio · 고정 vs 유동 판단법)

 

반응형 작업에서
레이아웃보다 더 많이 깨지는 것이 있다.

바로 이미지다.

• PC에서는 예쁜데 모바일에서 잘림
• 비율이 깨짐
• 높이가 이상하게 늘어남
• 콘텐츠 영역이 밀림

반응형 이미지 설계는
단순히 width:100%가 아니다.

 

 

 

 

1. 가장 기본 원칙

/* CSS */

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

 

이건 기본 세팅이다.

 

하지만 이것만으로는 모든 상황을 해결할 수 없다.

 

---

2. 고정 이미지 vs 유동 이미지 판단법

1) 고정 비율 유지가 필요한 경우

• 썸네일 카드
• 배너
• 슬라이드 이미지
• 유튜브 썸네일
• 뉴스 목록 이미지

→ 비율 유지가 중요

 

2) 유동 크기 허용이 가능한 경우

• 본문 삽입 이미지
• 상세 설명 이미지
• 단순 사진

→ 원본 비율 유지가 중요

 

---

3. aspect-ratio 사용 전략

비율 유지용 핵심 속성:

/* CSS */

.card-thumb {
  aspect-ratio: 16 / 9;
}

 

이렇게 하면
비율을 유지하면서 공간이 먼저 확보된다.

 

장점

• 레이아웃 점프 방지
• CLS 감소 (퍼포먼스 향상)
• 디자인 일관성 유지

---

4. object-fit 실전 사용법

이미지가 박스를 채우는 방식 제어

/* CSS */

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

cover

→ 비율 유지 + 꽉 채움 (일부 잘림)

contain

→ 비율 유지 + 잘림 없음 (여백 발생)

실무에서는 대부분 cover를 쓴다.

---

5. 반응형 배너 처리 전략

고정 높이 배너는
모바일에서 특히 깨진다.

 

❌ 잘못된 방식

/* CSS */

.banner {
  height: 400px;
}

모바일에서 공간 낭비 발생.

 

✅ 추천 방식

/* CSS */

.banner {
  aspect-ratio: 1920 / 600;
}

 

또는

/* CSS */

height: clamp(200px, 30vw, 400px);

→ clamp와 같이 쓰면 더 유연하다.

 

---

6. background-image vs img 태그 선택 기준

img를 써야 하는 경우

• 콘텐츠 의미가 있음
• 접근성 필요 (alt 필요)
• SEO 영향 있음

background-image를 써도 되는 경우

• 단순 장식용
• 배경 패턴
• 의미 없는 비주얼

공공기관에서는
의미 있는 이미지는 반드시 <img> 사용.

---

7. 반응형 이미지 실수 TOP4

1. 고정 height 사용
2. object-fit 없이 강제 크기 조정
3. PC 기준으로만 자른 이미지 사용
4. 모바일 별도 이미지 고려 안 함

---

8. 모바일 전용 이미지가 필요한 경우

<!-- HTML -->

<picture>
  <source media="(max-width: 768px)" srcset="mobile.jpg">
  <img src="desktop.jpg" alt="설명">
</picture>

공공기관에서는
용량 최적화 + 가독성 확보 위해 종종 필요.

---

9. 실무 판단 기준 정리

 

카드 썸네일	aspect-ratio + object-fit:cover
배너	aspect-ratio 또는 clamp
본문 이미지	max-width:100%
아이콘	SVG 권장
의미 이미지	img + alt

---

정리

반응형 이미지 설계는

비율을 먼저 설계하고
크기를 나중에 조정하는 것

이다.

 

aspect-ratio와 object-fit을
기본 도구로 생각하면
레이아웃 안정성이 크게 올라간다.