이미지·동영상 반응형 처리 완벽 가이드｜object-fit & aspect-ratio

글쓴이 /

반응형 웹에서 이미지와 동영상은 디자인 품질을 좌우하는 핵심 요소입니다.
object-fit과 aspect-ratio 속성을 활용하면 화면 크기에 맞춰 콘텐츠를 깔끔하게 표시할 수 있습니다.
이번 글에서는 두 속성의 차이점과 실무 예시를 통해 완벽한 반응형 미디어 처리 방법을 소개합니다.

반응형 이미지와 동영상의 중요성

  • 다양한 디바이스에서 이미지나 영상이 깨지지 않고 표시되어야 UX가 향상됩니다.
  • CSS만으로도 크롭, 비율 유지, 꽉 채우기 등을 구현할 수 있어 JS 없이 성능 최적화 가능.
  • 대표적으로 object-fit과 aspect-ratio가 핵심 속성.

TIP: 미디어 파일은 반드시 적절히 압축하고 웹 최적화 형식(WebP, AVIF) 사용을 추천합니다.

object-fit으로 이미지 크롭 제어

기본 문법

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
CSS
값설명대표 사례
fill요소 영역을 꽉 채움 (비율 무시)배경 패턴
contain비율 유지, 요소에 맞춰 축소로고, 아이콘
cover비율 유지, 요소를 꽉 채우며 크롭 발생썸네일 이미지
none원본 크기 유지아트웍 이미지
scale-downnone 또는 contain 중 작은 값 선택프로필 이미지

HTML 예시

<div class="image-box">
  <img src="photo.jpg" alt="풍경 이미지">
</div>
HTML

CSS 예시

.image-box {
  width: 100%;
  height: 250px;
  overflow: hidden;
}
.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
CSS

RAO TIP: object-fit: cover;는 대표 썸네일과 같이 균일한 그리드 레이아웃에 자주 사용됩니다.

aspect-ratio로 고정 비율 유지

기본 문법

.video-container {
  aspect-ratio: 16 / 9;
}
CSS
  • 부모 컨테이너가 리사이즈되더라도 항상 16:9 비율 유지
  • iframe이나 video 태그와 함께 사용하면 유튜브 영상 반응형 처리에 최적

HTML 예시

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/abcd1234" 
          frameborder="0" allowfullscreen></iframe>
</div>
HTML

CSS 예시

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
}

.video-container iframe {
  width: 100%;
  height: 100%;
}
CSS

RAO TIP: 기존에는 padding-bottom 트릭으로 비율을 유지했지만,
CSS만으로 간단하게 구현 가능해졌습니다.

실무에서 자주 쓰는 패턴

이미지 + 텍스트 카드

.card {
  display: flex;
  flex-direction: column;
}

.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
CSS
  • 상품 이미지, 블로그 썸네일 등에서 활용

유튜브 반응형 영상

.youtube-wrapper {
  max-width: 800px;
  margin: auto;
}

.youtube-wrapper iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}
CSS
  • 영상의 크기가 부모 영역에 따라 자동 반응

마무리

object-fit과 aspect-ratio는 반응형 미디어 처리의 핵심입니다.

  • object-fit → 이미지·영상 표시 방식 제어
  • aspect-ratio → 비율 고정 및 반응형 레이아웃 유지
    두 속성을 적절히 활용하면 자바스크립트 없이도 심플하고 강력한 반응형 웹을 구현할 수 있습니다.

Summary in English

Learn how to create fully responsive images and videos using CSS object-fit and aspect-ratio. Explore practical code patterns to maintain aspect ratios, crop images elegantly, and build seamless, scalable layouts for any device.

“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”

대표 사진: Unsplash의Ilya Pavlov

위로 스크롤