[CSS] object-fit

object-fit

• 정의 :  이미지, 비디오 등 박스(container) 안에 들어가는 콘텐츠의 크기 조절 및 배치 방식을 정의하는 속성
• 주로 <img>, <video>, <iframe> 같은 요소에 적용해서, 콘텐츠가 컨테이너 크기에 맞게 어떻게 맞춰질지 결정

사용 상황

• 반응형 이미지, 비디오 등에서 비율 유지하며 크기 맞출 때.
• 썸네일이나 카드 내 이미지가 깨지지 않고 보기 좋게 보이도록 할 때.
• 배경처럼 이미지가 영역을 꽉 채우게 하거나, 잘리지 않고 모두 보이도록 조절할 때.

참고 사항

• object-fit은 block 요소에는 적용되지 않고, replaced 요소(img, video 등)에 적용됨
• 배경 이미지처럼 background-size 속성과 비슷한 역할을 함 (하지만 object-fit은 요소 자체의 크기 조절)
• IE는 지원하지 않으니 필요하면 폴리필을 고려해야 함

---

속성 값

fill (기본값)

• 객체가 부모 요소의 너비와 높이를 꽉 채우도록 강제로 크기 조절
• 이때 원본 비율은 유지하지 않음 → 이미지나 영상이 찌그러질 수 있음
• 예) 400x400 이미지가 300x200 컨테이너에 들어가면 300x200으로 강제 변형
• 실무 활용:
  • 이미지 비율 왜곡이 크게 문제가 안 되고, 공간을 완전히 채우는 게 우선인 경우.
  • 예: 배너 배경 이미지, 단순 아이콘 등에서 공간 활용 우선.
    
    

---

contain

• 객체의 원본 비율을 유지하면서 부모 컨테이너 안에 완전히 들어가도록 크기를 조절
• 부모 영역에 맞게 축소 혹은 확대되지만, 빈 공간이 생길 수 있음
• 예) 400x400 이미지는 300x200 컨테이너에서 200x200 크기로 축소되어, 상하 또는 좌우에 빈 공간 발생.
• 실무 활용:
  • 이미지의 전체가 보여져야 할 때.
  • 예: 프로필 사진, 썸네일 이미지, 상품 이미지 등.
  • 컨테이너 크기에 맞게 비율 유지가 중요할 때.

S

---

cover

• 객체의 원본 비율을 유지하면서 부모 컨테이너를 완전히 덮도록 크기를 조절
• 이미지 일부가 잘릴 수 있지만 빈 공간 없이 꽉 찬 상태를 만듦
• 예) 400x400 이미지는 300x200 컨테이너에서 300x300으로 확대되어 상하가 잘림
• 실무 활용:
  • 공간을 완전히 채우는 게 중요하고, 일부 자름이 허용되는 경우.
  • 예: 카드 배경 이미지, 히어로 이미지, 커버 사진 등.
  • 시각적 임팩트를 위해 꽉 찬 이미지가 필요할 때.

---

none

• 객체의 크기를 전혀 변경하지 않고 원본 크기를 유지
• 부모보다 크면 넘치거나 잘릴 수 있고, 작으면 빈 공간이 생김.
• 예) 400x400 이미지는 300x200 컨테이너에서 400x400 크기로 표시되어 부모를 넘침.
• 실무 활용:
  • 원본 크기가 중요하고, 크기 조절이 필요 없거나 별도 스타일로 조절할 때.
  • 예: 아이콘, 로고, 또는 스크립트로 크기 조절을 직접 제어하는 경우.

---

scale-down

• none과 contain 중에서 더 작은 크기를 자동 선택해서 적용
• 이미지가 부모보다 크면 축소(비율 유지), 작으면 원본 크기 유지.
• 예) 원본이 400x400이고 부모가 300x200이면 200x200으로 축소되고, 원본 150x100이면 그대로 유지됨.
• 실무 활용:
  • 이미지 크기가 다양할 때, 부모를 넘지 않으면서 가능한 원본 크기를 유지하고 싶을 때.
  • 예: 다양한 크기의 유저 업로드 이미지 처리, 반응형 이미지에서 크기 제한 필요할 때.