object-fit

대체 요소(img, video)가 컨테이너에 맞춰지는 방식을 제어합니다. 이미지의 비율을 유지하면서 잘라내거나, 전체를 보여줄지 결정합니다.

클래스 목록

클래스	CSS	설명
`ofc`	object-fit: cover	컨테이너를 채움. 비율 유지, 넘치는 부분 잘림
`ofct`	object-fit: contain	전체를 보여줌. 비율 유지, 여백 발생 가능

시각적 비교

동일한 이미지를 고정 크기 컨테이너에 넣었을 때 cover와 contain의 차이를 비교합니다.

object-fit: cover — ofc

컨테이너를 완전히 채움. 비율 유지, 넘치는 부분 잘림

object-fit: contain — ofct

컨테이너 안에 전체 표시. 비율 유지, 여백(레터박스) 발생 가능

	ofc (cover)	ofct (contain)
채움 방식	컨테이너를 빈틈 없이 채움	컨테이너 안에 전체를 맞춤
비율 유지	유지	유지
잘림 여부	넘치는 부분 잘림	잘리지 않음
여백 발생	없음	비율 차이만큼 여백 발생 (레터박스)
주요 용도	히어로, 아바타, 썸네일, 배경형 이미지	상품 이미지, 로고, 아이콘

언제 뭘 쓸까?

상황	추천	이유
히어로 이미지, 배너	`ofc`	빈틈 없이 채워야 시각적 임팩트
사용자 아바타	`ofc`	정사각형 + br50p로 원형 아바타
카드 썸네일	`ofc`	다양한 비율의 이미지를 균일하게 표시
상품 이미지	`ofct`	상품 전체가 보여야 함, 잘림 방지
로고 표시	`ofct`	로고 일부가 잘리면 안 됨
갤러리/포트폴리오	`ofc`	일관된 그리드 크기 유지

클래스별 상세

`ofc`object-fit: cover

컨테이너를 완전히 채우면서 이미지의 비율을 유지합니다. 넘치는 부분은 잘립니다. 히어로 이미지, 아바타, 썸네일 등 가장 많이 사용하는 패턴입니다.

<!-- 히어로 이미지 -->
<div class="w100p h30rem oh br8px">
  <img src="hero.jpg" alt="hero" class="w100p h100p ofc" />
</div>

<!-- 원형 아바타 -->
<img src="avatar.jpg" alt="avatar" class="w6rem h6rem ofc br50p" />

<!-- 카드 썸네일 -->
<div class="dg gtcr3-1fr gap2rem sm-gtc1fr">
  <div class="oh br8px">
    <img src="thumb1.jpg" alt="" class="w100p h20rem ofc" />
    <div class="p16px">카드 제목</div>
  </div>
</div>

자주 쓰는 조합

`w100p h20rem ofc`	반응형 이미지 컨테이너 (가장 기본)
`w6rem h6rem ofc br50p`	원형 아바타
`w100p h30rem ofc br8px`	둥근 모서리 히어로 이미지
`ar16-9 w100p ofc`	16:9 비율 고정 이미지

`ofct`object-fit: contain

이미지 전체가 컨테이너 안에 보이도록 맞춥니다. 비율을 유지하며, 컨테이너와 비율이 다르면 여백(레터박스)이 생깁니다. 상품 이미지, 로고 등 잘림 없이 전체를 보여줘야 할 때 사용합니다.

<!-- 상품 이미지 -->
<div class="w100p h24rem bg18181B br8px">
  <img src="product.jpg" alt="product" class="w100p h100p ofct" />
</div>

<!-- 로고 표시 -->
<div class="w12rem h6rem bg0F0F17 br8px p8px">
  <img src="logo.svg" alt="logo" class="w100p h100p ofct" />
</div>

자주 쓰는 조합

`w100p h24rem ofct`	상품 이미지 (전체 보이기)
`w12rem h6rem ofct p8px`	로고 컨테이너 (패딩 포함)
`ar4-3 w100p ofct bg18181B`	4:3 비율 + 배경색으로 여백 처리

공통 패턴

반응형 이미지 컨테이너의 기본 패턴은 w100p h20rem ofc입니다.

<!-- 반응형 이미지 컨테이너 (기본 패턴) -->
<img src="photo.jpg" alt="" class="w100p h20rem ofc" />

<!-- 카드 그리드 + 균일한 썸네일 -->
<div class="dg gtcr3-1fr gap2rem sm-gtc1fr">
  <div class="oh br8px bg18181B">
    <img src="1.jpg" alt="" class="w100p h20rem ofc" />
    <div class="p16px">
      <h3>제목</h3>
      <p>설명</p>
    </div>
  </div>
  <div class="oh br8px bg18181B">
    <img src="2.jpg" alt="" class="w100p h20rem ofc" />
    <div class="p16px">
      <h3>제목</h3>
      <p>설명</p>
    </div>
  </div>
</div>

<!-- 아바타 목록 -->
<div class="df gap8px">
  <img src="u1.jpg" alt="" class="w4rem h4rem ofc br50p" />
  <img src="u2.jpg" alt="" class="w4rem h4rem ofc br50p" />
  <img src="u3.jpg" alt="" class="w4rem h4rem ofc br50p" />
</div>

팁 & 주의사항

대체 요소 전용

ofc와 ofct는 img, video, canvas 등 대체 요소(replaced elements)에서만 동작합니다. 일반 div에는 효과가 없습니다.

원형 아바타 만들기

ofc와 br50p를 조합하면 어떤 비율의 이미지든 원형으로 잘라낼 수 있습니다. 예: w6rem h6rem ofc br50p

width/height 필수

object-fit은 요소에 명시적인 크기가 지정되어 있어야 동작합니다. w100p h20rem 등으로 컨테이너 크기를 반드시 지정하세요.

aspect-ratio width height overflow