[CSS] object-fit 속성

object-fit 속성 개념

• 이미지나 비디오와 같은 대체 요소가 지정된 컨테이너에 맞춰지는 방식을 제어하는 CSS 속성

주요 값

1. fill (기본값)

• 이미지를 컨테이너에 맞게 늘리거나 줄임
• 원본 이미지의 종횡비를 유지하지 않음
• 이미지가 왜곡될 수 있음

2. contain

• 이미지의 종횡비를 유지하면서 컨테이너 내에 전체 이미지가 보이도록 조절함
• 컨테이너와 이미지의 종횡비가 다르면 빈 공간이 생길 수 있음

3. cover

• 이미지의 종횡비를 유지하면서 컨테이너를 완전히 채움
• 이미지의 일부가 잘릴 수 있음

4. none

• 이미지의 원본 크기 유지
• 컨테이너 크기와 상관없이 이미지가 표시됨

5. scale-down

• none과 contain 중 더 작은 크기로 이미지 조절

사용 예시

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

브라우저 지원

• 대부분의 현대 브라우저에서 지원하지만, 인터넷 익스플로러에서는 지원되지 않음

주의사항

• object-fit은 대체 요소(img, video 등)에만 적용됨
• 반응형 디자인에 매우 유용하지만, 이미지의 중요 부분이 잘리지 않도록 주의해야 함