CSS 오브젝트 포지션 속성

정의와 사용법

object-position 속성과 object-fit을 함께 사용하여 <img> 또는 <video>가 자신의 내용 상자 내에서 x/y 좌표로 위치를 정의하는 방법을 정의할 수 있습니다.

다른 것을 참고:

CSS 강의:CSS object-fit

CSS 참조 가이드:CSS object-position

HTML DOM 참조 가이드:objectPosition 속성

예제

이미지의 크기를 내용 상자에 맞게 조정하고, 내용 상자 내에서 왼쪽에 5px, 상단에 10%로 이동시킵니다:

img.a {
  width: 200px;
  height: 400px;
  object-fit: none;
  object-position: 5px 10%;
  border: 5px solid red;
}

직접 시도해 보세요

CSS 문법

object-position: position|initial|thuộc kế;

속성 값

값 설명
position

이미지나 비디오가 내용 상자 내의 위치를 정의합니다.

첫 번째 값은 x축을, 두 번째 값은 y축을 제어합니다.

문자열(왼쪽, 중앙 또는 오른쪽) 또는 숫자(px 또는 %로 표시됨). 음수 값을 허용합니다.
initial 이 속성을 기본 값으로 설정합니다. 참고: initial.
thuộc kế 부모 요소에서 이 속성을 thừa kế합니다. 참고: thuộc kế.

기술 세부 사항

기본 값: 50% 50%
thừa kế: 네
애니메이션 제작: 지원됩니다. 참고:애니메이션 관련 속성.
버전: CSS3
JavaScript 문법: object.style.objectPosition="0 10%"

브라우저 지원

표에 나타난 숫자는 이 속성을 최초로 지원하는 브라우저 버전을 나타냅니다。

크롬 IE / 엣지 파이어폭스 사파리 오페라
31.0 16.0 36.0 10.0 19.0