[CSS] Object-fit

Object-fit

• 이미지나 비디오와 같은 대체 요소(replaced elements)의 크기와 비율을
  컨테이너 내에서 조절하는 CSS 속성

관련 태그

<img>

<video>

<object>

<svg>

주요 속성 값

• fill (기본값)
  • 이미지를 컨테이너에 맞게 늘리거나 줄임
  • 종횡비를 유지하지 않음
  • 이미지가 왜곡될 수 있음
• contain
  • 이미지의 종횡비를 유지하면서 전체 이미지가 보이도록 조절
  • 컨테이너와 이미지의 종횡비가 다르면 빈 공간이 생길 수 있음
• cover
  • 이미지의 종횡비를 유지하면서 컨테이너를 완전히 채움
  • 이미지의 일부가 잘릴 수 있음
• none
  • 이미지의 원본 크기 유지
  • 컨테이너 크기와 상관없이 이미지 표시
• scale-down
  • none과 contain 중 더 작은 크기로 이미지 조절

사용 예시

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

주의사항

• 대체 요소(img, video 등)에만 적용 가능
• 반응형 디자인에 유용하지만, 이미지의 중요 부분이 잘리지 않도록 주의 필요

관련 속성

• object-position: 이미지 위치 조정
• background-size: 유사한 기능