CSS object-position 속성 - 코딩에브리바디

`object-position` 속성 사용법

object-position 속성은
이미지나 비디오 등의 대체 요소의 콘텐츠가 어떻게 배치할지 위치를 지정합니다.

정의와 구문

object-position 속성은 이미지나 비디오 등의 대체 요소의 콘텐츠가 어떻게 배치할지 위치를 지정합니다.
<img>나 <video> 등의 요소에 object-fit 속성과 조합하여 사용됩니다.

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

값

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

CSS 출처링크: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position#syntax

/* 키워드 값 */
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;

예제

CSS

img {
    width: 260px;
    height: 250px;
    border: 1px solid red;
    object-fit: none; /* 이미지가 원래 크기대로 나타납니다. */
    object-position: left bottom;
}