object-fit

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS	설명
`ofc`	object-fit: cover	컨테이너를 채움. 비율 유지, 넘치는 부분 잘림
`ofct`	object-fit: contain	전체를 보여줌. 비율 유지, 여백 발생 가능

시각적 비교

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

object-fit: cover — ofc

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

object-fit: contain — ofct

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

	ofc (cover)	ofct (contain)
채움 방식	Fills container with no gaps	Fits entirely within container
비율 유지	Preserved	Preserved
잘림 여부	Overflowing parts cropped	Not cropped
여백 발생	None	Margins appear for ratio difference (letterbox)
주요 용도	Hero, avatar, thumbnail, background images	Product images, logos, icons

언제 뭘 쓸까?

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">상황	추천	이유
Hero image, banner	`ofc`	Fill completely for visual impact
User avatar	`ofc`	Square + br50p for circular avatar
Card thumbnail	`ofc`	Display images of various ratios uniformly
Product image	`ofct`	Full product must be visible, prevent cropping
Logo display	`ofct`	Logo must not be partially cropped
Gallery/portfolio	`ofc`	일관된 그리드 크기 Preserved

클래스별 상세

`ofc`object-fit: cover

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

<!-- Hero image -->
<div class="w100p h30rem oh br8px">
  <img src="hero.jpg" alt="hero" class="w100p h100p ofc" />
</div>

<!-- Circular avatar -->
<img src="avatar.jpg" alt="avatar" class="w6rem h6rem ofc br50p" />

<!-- Card thumbnail -->
<div class="dg gtcr3-1fr gap2rem sm-gtc1fr">
  <div class="oh br8px">
    <img src="thumb1.jpg" alt="" class="w100p h20rem ofc" />
    <div class="p16px">Card Title</div>
  </div>
</div>

자주 쓰는 조합

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

`ofct`object-fit: contain

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

<!-- Product image -->
<div class="w100p h24rem bg18181B br8px">
  <img src="product.jpg" alt="product" class="w100p h100p ofct" />
</div>

<!-- Logo display -->
<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입니다.

<!-- Responsive image container (default pattern) -->
<img src="photo.jpg" alt="" class="w100p h20rem ofc" />

<!-- Card grid + uniform thumbnails -->
<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>Title</h3>
      <p>Description</p>
    </div>
  </div>
  <div class="oh br8px bg18181B">
    <img src="2.jpg" alt="" class="w100p h20rem ofc" />
    <div class="p16px">
      <h3>Title</h3>
      <p>Description</p>
    </div>
  </div>
</div>

<!-- Avatar list -->
<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