CSS 오브젝트 필트 속성

정의와 사용법

object-fit 속성은 <img> 또는 <video>의 크기를 조정하여 콘테이너에 맞추는 데 사용됩니다.

이 속성은 콘테이너에 어떤 방식으로 콘텐츠를 채울지를 나타냅니다. 예를 들어, 비율을 유지하거나 가능한 한 많은 공간을 차지하는 것입니다.

다른 것을 참고하세요:

CSS 강의:CSS object-fit

CSS 참조 매뉴얼:CSS object-position

HTML DOM 참조 매뉴얼:objectFit 속성

예제

이미지의 양쪽을 잘라내고 비율을 유지한 후 공간을 채웁니다:

img.a {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

직접 시도해 보세요

CSS 문법

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

속성 값

값 설명
fill 기본 값. 대체 콘텐츠의 크기를 조정하여 요소의 내용 프레임을 채웁니다. 필요한 경우 객체는 확장되거나 압축됩니다.
contain 대체 콘텐츠를 확대하여 넓이 비율을 유지하면서 요소의 내용 프레임에 맞춥니다.
cover 대체 콘텐츠의 크기를 조정하여 채우기 요소의 전체 내용 프레임에 맞추어 유지합니다. 객체는 잘라납니다.
none 대체 콘텐츠의 크기를 조정하지 않습니다.
scale-down 콘텐츠의 크기는 none 또는 contain 중 하나와 동일하며, 두 가지 중 어느 것이 더 작은 객체 크기를 가질지에 따라 결정됩니다.
initial 이 속성을 기본 값으로 설정합니다. 참고: initial.
inherit 부모 요소에서 이 속성을 thừa kế합니다. 참고: inherit.

기술 세부 사항

기본 값: 단별 속성을 참고하세요.
thừa kế: 아니요
애니메이션 제작: 지원하지 않습니다. 참고:애니메이션 관련 속성.
버전: CSS3
JavaScript 문법: object.style.objectFit="cover"

브라우저 지원

표에서의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0