스타일 objectFit 속성
예시
가로 세로 비율을 유지하면서 이미지의 측면을 잘라내고 공간을 채웁니다.
document.getElementById("myImg").style.objectFit = "cover";
정의 및 사용
objectFit 속성은 컨테이너에 맞게 <img> 또는 <video> 크기를 조정하는 방법을 지정하는 데 사용됩니다.
이 속성은 콘텐츠에 다양한 방법으로 컨테이너를 채우도록 지시합니다. "그 종횡비 유지" 또는 "최대한 늘리고 많은 공간 차지"와 같이
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
objectFit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
통사론
objectFit 속성을 반환합니다.
object.style.objectFit
objectFit 속성을 설정합니다.
object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"
속성 값
Value | Description |
---|---|
fill | This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit |
contain | The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box |
cover | The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit |
none | The replaced content is not resized |
scale-down | The content is sized as if none or contain were specified (would result in a smaller concrete object size) |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
기술적 세부 사항
기본값: | 채우다 |
---|---|
반환 값: | 요소의 개체 맞춤을 나타내는 문자열 |
CSS 버전 | CSS3 |
관련 페이지
CSS 튜토리얼: CSS 객체 맞춤
CSS 참조: 개체 맞춤 속성
❮ 스타일 개체