CSS object-position 속성 – 컨테이너 내에서 object-fit의 위치 지정하기

정의 및 사용 방법

object-position 속성은
이미지나 비디오 같은 대체 요소의 콘텐츠를 컨테이너 내에서 object-fit 속성과 함께 어떻게 배치할지 위치를 지정합니다.

<img>나 <video> 등의 요소에 object-fit 속성과 조합하여 사용됩니다.

기본 예제

형식 구문

값

object-position 속성 값
`position`	콘텐츠 상자 내부의 이미지 또는 비디오 위치를 지정합니다. 첫 번째 값은 x축을 제어하고 두 번째 값은 y축을 제어합니다. 문자열 위치(`left`, `center` 또는 `right` 등) 값 또는 숫자 길이(`px` 또는 `%` 등) 값일 수 있습니다. 음수 값이 허용됩니다.

구문

CSS

/* 키워드 값 */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;
object-position: center top;

/* 백분율(%) 단위 값 */
object-position: 45% 55%;

/* 길이 값 */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 13ch 6em;

/* 모서리 오프셋 값 */
object-position: top 0 right 10px;
object-position: bottom 12px right 20px;
object-position: right 3rem bottom 10px;

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

형식 정의

object-position 속성은 object-fit을 사용해 크기가 조정된 이미지나 비디오 등의 대체 요소 콘텐츠가 컨테이너 내부에서 어디를 기준으로 배치될지를 지정합니다. 콘텐츠 박스 내에서의 시작 위치를 결정하며, 주로 <img>나 <video> 요소에서 object-fit과 함께 사용됩니다.

object-position 속성의 형식 정의
초깃값	`50% 50%`
적용 요소	대체 요소(replaced elements)
상속	예
애니메이션	예

활용 예제

이미지와 비디오 예제를 통해 살펴보겠습니다.

이미지 예제

CSS

.container {
    width: 260px;
    height: 250px;
    border: 5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: none;
    object-position: left bottom;
}

비디오 예제

CSS

.container {
    width: 260px;
    height: 250px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

브라우저 호환성

object-position 속성에 대한 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`object-position`	32	79	36	10

명세서

object-position 속성에 대한 명세서 사양
명세서 사양
`object-position`	CSS Images Module Level 3 #the-object-position

참고문헌

같이 보기

CSS object-fit 속성