CSS 객체 위치 속성
예시
콘텐츠 상자에 맞게 이미지 크기를 조정하고 콘텐츠 상자 내부에서 왼쪽에서 5px, 위쪽에서 10% 위치에 이미지를 배치합니다.
img.a {
width: 200px;
height:
400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
정의 및 사용
속성 은 object-position
<img> 또는 <video>가 "자체 콘텐츠 상자" 내부의 x/y 좌표와 함께 배치되어야 하는 방법을 지정하기 위해 object-fit과 함께 사용됩니다.
기본값: | 50% 50% |
---|---|
상속: | 네 |
애니메이션 가능: | 예. 애니메이션 가능 에 대해 읽기 |
버전: | CSS3 |
자바스크립트 구문: | 개체 .style.objectPosition="0 10%" |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
CSS 구문
object-position: position|initial|inherit;
속성 값
Value | Description |
---|---|
position | Specifies the position of the image or video inside its content box. First value controls the x-axis and the second value controls the y-axis. Can be a string (left, center or right), or a number (in px or %). Negative values are allowed |
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 참조: objectPosition 속성