AAtomic CSS

object-position

대체 요소(img, video)가 컨테이너보다 클 때 어느 부분을 남길지를 정합니다. ofc로 잘라낸 이미지에서 인물의 얼굴이 잘려나가는 문제를 해결하는 클래스입니다.

클래스 목록

클래스CSS설명
opcobject-position: center가운데 기준. 좌우와 위아래가 균등하게 잘림 (기본값)
optobject-position: top위쪽 기준. 이미지 상단이 남고 아래쪽이 잘림
opbobject-position: bottom아래쪽 기준. 이미지 하단이 남고 위쪽이 잘림
oplobject-position: left왼쪽 기준. 이미지 좌측이 남고 오른쪽이 잘림
oprobject-position: right오른쪽 기준. 이미지 우측이 남고 왼쪽이 잘림

핵심 개념

object-position은 단독으로는 아무 효과가 없습니다. 이미지가 컨테이너와 크기가 달라 잘리거나 여백이 생길 때, 그 잘림과 여백의 기준점을 옮기는 속성이기 때문입니다. 따라서 반드시 object-fit 클래스와 함께 사용합니다.

클래스CSSobject-position 효과
ofcobject-fit: cover잘려나갈 부분을 결정. 가장 많이 쓰이는 조합
ofctobject-fit: contain여백 안에서 이미지가 놓일 위치를 결정
ofnobject-fit: none원본 크기 그대로 놓인 이미지의 기준점을 이동
ofsdobject-fit: scale-down축소된 경우 contain과, 그렇지 않으면 none과 동일하게 동작
offobject-fit: fill효과 없음. 이미지를 늘려 빈틈 없이 채우므로 옮길 자리가 없음

기본값은 center이므로, 아무것도 지정하지 않으면 항상 이미지의 정중앙이 기준이 됩니다. 인물 사진 썸네일에서 머리가 잘리는 대부분의 원인이 바로 이 기본값입니다.

시각적 비교

가로로 잘릴 때 — 세로로 긴 컨테이너

가로로 넓은 이미지를 좁은 컨테이너에 ofc로 채우면 좌우가 잘립니다. 이때 opl은 왼쪽을, opr은 오른쪽을 남깁니다. 위아래로는 잘리지 않으므로 opt와 opb는 변화가 없습니다.

opc

opt

opb

opl

opr

세로로 잘릴 때 — 가로로 긴 컨테이너

세로로 긴 이미지를 납작한 컨테이너에 채우면 위아래가 잘립니다. 이때는 반대로 opt와 opb만 차이를 만듭니다. 잘리는 축에 해당하는 방향만 효과가 있다는 점이 핵심입니다.

opc

opt

opb

opl

opr

위치 비교표

클래스위치잘려나가는 쪽주요 용도
opccenter위아래와 좌우가 절반씩풍경, 배경, 패턴 등 중심이 중요한 이미지
opttop아래쪽인물 프로필, 얼굴이 위쪽에 있는 사진
opbbottom위쪽제품 하단 강조, 바닥면이 중요한 사진
oplleft오른쪽좌측 정렬 로고, 왼쪽에 피사체가 있는 사진
oprright왼쪽우측 정렬 배너, 오른쪽에 피사체가 있는 사진

클래스별 상세

opcobject-position: center

브라우저 기본값입니다. 이미지의 정중앙을 기준으로 상하좌우가 균등하게 잘려나갑니다. 풍경이나 패턴처럼 피사체가 중앙에 있는 이미지에 적합하며, 다른 방향 클래스를 조건부로 덮어쓸 때 기본 상태로 명시하는 용도로도 씁니다.

가로로 잘릴 때 — 세로로 긴 컨테이너

세로로 잘릴 때 — 가로로 긴 컨테이너

<!-- Default anchor: the exact middle of the image -->
<div class="w100p h20rem oh br8px">
  <img src="landscape.jpg" alt="landscape" class="w100p h100p ofc opc" />
</div>

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

<!-- Centered inside a letterbox -->
<div class="w100p h20rem bg18181B br8px">
  <img src="product.png" alt="product" class="w100p h100p ofct opc" />
</div>

자주 쓰는 조합

w100p h20rem ofc opc정사각형 썸네일 중앙 크롭
w6rem h6rem ofc opc br50p원형 아바타 기본 정렬
w100p h20rem ofct opc여백 안에서 가운데 정렬
w100p h12rem ofc opc가로로 넓은 리스트 썸네일

optobject-position: top

이미지의 상단을 컨테이너 위쪽에 고정합니다. 세로로 잘릴 때 아래쪽만 잘려나가므로 인물의 머리와 얼굴이 보존됩니다. 카드 썸네일, 프로필 배너처럼 사람이 등장하는 이미지에서 가장 실용적인 선택입니다.

가로로 잘릴 때 — 세로로 긴 컨테이너

세로로 잘릴 때 — 가로로 긴 컨테이너

<!-- Portrait card thumbnail: keeps the face -->
<div class="oh br8px bg18181B">
  <img src="person.jpg" alt="person" class="w100p h20rem ofc opt" />
  <div class="p16px fs14px cFAFAFA">Card Title</div>
</div>

<!-- Hero banner anchored to the top -->
<div class="w100p h30rem oh">
  <img src="hero.jpg" alt="hero" class="w100p h100p ofc opt" />
</div>

자주 쓰는 조합

w100p h20rem ofc opt인물 카드 썸네일 (얼굴 보존)
w100p h30rem ofc opt히어로 배너 상단 고정

opbobject-position: bottom

이미지의 하단을 컨테이너 아래쪽에 고정합니다. 세로로 잘릴 때 위쪽 하늘이나 여백이 먼저 사라집니다. 제품이 바닥에 놓인 사진, 건물의 저층부, 그림자와 반사가 중요한 이미지에 사용합니다.

가로로 잘릴 때 — 세로로 긴 컨테이너

세로로 잘릴 때 — 가로로 긴 컨테이너

<!-- Product thumbnail emphasizing the base -->
<div class="w100p h20rem oh br8px">
  <img src="shoe.jpg" alt="shoe" class="w100p h100p ofc opb" />
</div>

<!-- Background image aligned to the bottom -->
<div class="w100p h24rem oh pr">
  <img src="city.jpg" alt="city" class="w100p h100p ofc opb" />
</div>

자주 쓰는 조합

w100p h20rem ofc opb제품 바닥면 강조 썸네일
w100p h24rem ofc opb하단 정렬 배경 이미지

oplobject-position: left

이미지의 좌측을 컨테이너 왼쪽에 고정합니다. 가로로 잘릴 때 오른쪽이 잘려나가므로 왼쪽에 피사체나 로고가 배치된 이미지를 보존할 수 있습니다. 가로로 넓은 배너를 좁은 카드에 넣을 때 자주 씁니다.

가로로 잘릴 때 — 세로로 긴 컨테이너

세로로 잘릴 때 — 가로로 긴 컨테이너

<!-- Wide banner squeezed into a narrow card -->
<div class="w100p h20rem oh br8px">
  <img src="banner.jpg" alt="banner" class="w100p h100p ofc opl" />
</div>

<!-- Logo pinned to the left edge -->
<div class="w12rem h6rem bg0F0F17 br8px p8px">
  <img src="logo.svg" alt="logo" class="w100p h100p ofct opl" />
</div>

자주 쓰는 조합

w100p h20rem ofc opl좌측 피사체 보존 카드
w12rem h6rem ofct opl p8px로고를 왼쪽에 붙여 표시

oprobject-position: right

이미지의 우측을 컨테이너 오른쪽에 고정합니다. 가로로 잘릴 때 왼쪽이 잘려나갑니다. 오른쪽에 인물이나 제품이 치우쳐 있는 배너, 텍스트를 왼쪽에 겹쳐 올리는 히어로 레이아웃에 적합합니다.

가로로 잘릴 때 — 세로로 긴 컨테이너

세로로 잘릴 때 — 가로로 긴 컨테이너

<!-- Banner with the subject skewed right -->
<div class="w100p h20rem oh br8px">
  <img src="promo.jpg" alt="promo" class="w100p h100p ofc opr" />
</div>

<!-- Hero with text overlaid on the left -->
<div class="pr w100p h30rem oh">
  <img src="hero.jpg" alt="hero" class="w100p h100p ofc opr" />
</div>

자주 쓰는 조합

w100p h20rem ofc opr우측 피사체 보존 배너
w100p h30rem ofc opr텍스트를 왼쪽에 올리는 히어로

사용 패턴

가장 흔한 패턴은 ofc와 방향 클래스를 붙여 쓰는 것입니다. 인물은 opt, 풍경은 기본값 opc가 안전합니다.

<!-- Portrait thumbnail grid: keep faces with opt -->
<div class="dg gtcr3-1fr gap2rem sm-gtc1fr">
  <div class="oh br8px bg18181B">
    <img src="p1.jpg" alt="" class="w100p h20rem ofc opt" />
    <div class="p16px fs14px cFAFAFA">Member A</div>
  </div>
  <div class="oh br8px bg18181B">
    <img src="p2.jpg" alt="" class="w100p h20rem ofc opt" />
    <div class="p16px fs14px cFAFAFA">Member B</div>
  </div>
</div>

<!-- Wide banner in a narrow slot: keep the left subject -->
<div class="w100p h12rem oh br8px">
  <img src="banner.jpg" alt="" class="w100p h100p ofc opl" />
</div>

<!-- Letterboxed logo aligned to the left -->
<div class="w12rem h6rem bg0F0F17 br8px p8px">
  <img src="logo.svg" alt="" class="w100p h100p ofct opl" />
</div>

<!-- Responsive: top anchored on mobile, centered on desktop -->
<img src="hero.jpg" alt="" class="w100p h20rem ofc opt md-opc" />

팁 & 주의사항

object-fit 없이는 동작하지 않음

off(fill)은 이미지를 강제로 늘려 컨테이너를 정확히 채우므로 잘림도 여백도 없습니다. 남는 자리가 없으니 object-position도 효과가 없습니다. ofc, ofct, ofn, ofsd와 함께 쓰세요.

인물 썸네일은 opt

프로필 사진이나 인물이 포함된 카드 썸네일은 ofc opt 조합이 안전합니다. 세로로 잘릴 때 머리와 얼굴이 남고 발밑 여백이 먼저 잘려나가기 때문입니다.

contain에서는 정렬 도구

ofct와 함께 쓰면 잘림이 아니라 여백 안에서의 정렬을 제어합니다. 로고를 왼쪽에 붙이고 싶다면 ofct opl처럼 사용합니다.

object-fitaspect-ratiobackground-positionoverflowwidthheight