Style objectFit 속성

정의와 사용법

objectFit 속성은 <img> 또는 <video>의 크기를 컨테이너에 맞게 조정하는 방법을 정의합니다.

이 속성은 내용이 여러 가지 방식으로 컨테이너를 채우는 방법을 표시합니다；예를 들어 "비율을 유지하다"나 "가능한 한 많이 공간을 차지하다".

다른 참조도 참조하세요：

CSS 강의：CSS object-fit

CSS 참조 매뉴얼：object-fit 속성

예제

이미지의 양쪽을 잘라내고 비율을 유지하면서 공간을 채웁니다：

document.getElementById("myImg").style.objectFit = "cover";

본인이 직접 시도해 보세요

문법

objectFit 속성 반환：

object.style.objectFit

objectFit 속성 설정：

object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"

속성 값

값 설명
fill 기본적으로. 대체 내용의 크기를 조정하여 요소의 내용 상자를 채우습니다. 필요한 경우, 객체는 확장되거나 압축될 수 있습니다.
contain 대체 내용을 넓이와 높이 비율을 유지하면서 요소의 내용 상자에 맞게 조정합니다.
cover 대체 내용의 크기를 조정하여 채우는 요소의 전체 내용 상자에서 길이와 너비 비율을 유지합니다. 객체는 잘라낼 수 있습니다.
none 대체 내용의 크기를 조정하지 않습니다.
scale-down 내용의 크기는 none 또는 contain 중 하나와 동일하며, 두 가지 중哪一个가 더 작은 객체 크기를 가져오는지에 따라 결정됩니다.
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit 부모 요소에서 이 속성을 继承합니다. 참조하십시오 inherit。

기술 세부 사항

기본 값： fill
반환 값： 문자열로 요소의 object-fit 속성。
CSS 버전： CSS3

브라우저 지원

표의 숫자는 이 특성을 완전 지원하는 최초의 브라우저 버전을 기재하고 있습니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
31.0 16.0 36.0 7.1 19.0