object-position

CSS object-position 속성은 대체 요소의 콘텐츠 정렬 방식을 지정합니다. 대체 요소의 객체가 덮지 않은 부분은 요소의 배경이 보이게 됩니다.

대체 요소 객체의 고유 크기(수정을 가하지 않은 원래 크기)를 조정해 요소 박스에 맞추는 방법은 object-fit 속성으로 지정할 수 있습니다.

구문

/* <position> 값 */
object-position: center top;
object-position: 100px 50px;

/* 전역 값 */
object-position: inherit;
object-position: initial;
object-position: unset;

<position>
객체의 2D 위치를 지정하는 한 개에서 네 개의 값. 상대와 절대 오프셋을 사용할 수 있습니다.

참고: 콘텐츠가 대체 요소의 박스 바깥으로 나가도록 지정할 수도 있습니다.

형식 정의

초기값50% 50%
적용대상replaced elements
상속yes
Percentagesrefer to width and height of element itself
Computed valueas specified
Animation typerepeatable list of simple list of length, percentage, or calc

형식 구문

<position>

where
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

where
<length-percentage> = <length> | <percentage>

예제

이미지 콘텐츠 위치 지정

HTML

두 개의 <img> 요소가 MDN 로고를 가리키는 코드입니다.

<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>

CSS

다음 CSS는 두 <img> 요소 모두에 적용할 스타일과 함께, 각각 별도로 적용할 object-position 속성도 지정하고 있습니다.

img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}

첫 번째 이미지는 요소 박스의 왼쪽 경계로부터 10픽셀 떨어진 곳으로 배치됩니다. 두 번째 이미지는 요소 박스의 오른쪽 경계와 자신의 오른쪽 모서리를 서로 겹치고, 박스의 위쪽 경계로부터 박스 높이의 10% 떨어진 지점으로 배치됩니다.

결과

명세

Specification Status Comment
CSS Images Module Level 3
The definition of 'object-position' in that specification.
Candidate Recommendation Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
object-positionChrome Full support 31Edge Full support 16Firefox Full support 36IE No support NoOpera Full support 19
Full support 19
Full support 11.6
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari Full support 10WebView Android Full support 4.4.3Chrome Android Full support 31Firefox Android Full support 36Opera Android Full support 19
Full support 19
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS Full support 10Samsung Internet Android Full support 2.0
Support for three-value syntax of positionChrome No support 31 — 68Edge No support 16 — 79Firefox No support 36 — 70IE No support NoOpera No support 19 — 55
No support 19 — 55
Full support 11.6
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari Full support 10WebView Android No support 4.4.3 — 68Chrome Android No support 31 — 68Firefox Android Full support 36Opera Android No support 19 — 48
No support 19 — 48
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS Full support 10Samsung Internet Android No support 2.0 — 10.0

Legend

Full support  
Full support
No support  
No support
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기