CSS 객체 맞춤 속성
예시
가로 세로 비율을 유지하면서 이미지의 측면을 잘라내고 공간을 채웁니다.
img.a {
width: 200px;
height:
400px;
object-fit: cover;
}
정의 및 사용
속성 은 object-fit
컨테이너에 맞게 <img> 또는 <video> 크기를 조정하는 방법을 지정하는 데 사용됩니다.
이 속성은 콘텐츠에 다양한 방법으로 컨테이너를 채우도록 지시합니다. 예를 들어 "그 종횡비 유지" 또는 "늘어내고 가능한 한 많은 공간을 차지합니다."
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
CSS 구문
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
속성 값
Value | Description | Try it |
---|---|---|
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 튜토리얼: CSS 객체 맞춤
CSS 참조: CSS 객체 위치
HTML DOM 참조: objectFit 속성