Style objectPosition 속성

정의와 사용법

objectPosition 속성은 다음을 정의합니다: <img> 또는 <video> 자신의 내용 상자 내에서 어떻게 위치를 정의해야 합니까.

추가 참조:

CSS 강의:CSS object-fit

CSS 참조 설명서:object-position 속성

예제

이미지 크기를 내용 상자에 맞게 조정하고, 이미지를 내용 상자 내에서 왼쪽 5px와 상단 10% 위치에 정렬합니다:

document.getElementById("myImg").style.objectPosition = "0 10%";

직접 시험해 보세요

문법

objectPosition 속성 반환:

object.style.objectPosition

objectPosition 속성 설정:

object.style.objectPosition = "position|initial|inherit"

속성 값

값 설명
position

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

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

문자열(왼쪽, 중앙 또는 오른쪽) 또는 숫자(px 또는 % 단위로)가 될 수 있습니다.

부정적인 값을 허용합니다.
initial 이 속성을 기본 값으로 설정합니다. 참조: initial。
inherit 이 속성을 부모 요소에서 상속합니다. 참조: inherit。

기술 세부 사항

기본 값: 50% 50%
반환 값: 문자열 또는 숫자로, 요소가 그 내용 상자 내의 위치를 나타냅니다.
CSS 버전: CSS3

브라우저 지원

표에서의 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
31.0 16.0 36.0 10.1 19.0