[image] CSS - object-position 속성 - <img>/<video>가 "자체 콘텐츠 상자" 내부의 x/y 좌표와 함께 배치되어야 하는 방법 지정 위해 object-fit 속성과 함께 사용 (= object-position속성 = 어브젝트포지션속성)

목차

1. object-position 예제 - 컨테이너 내 이미지 위치 조정
2. object-position 정의
3. object-position 구문

object-position 예제 - 컨테이너 내 이미지 위치 조정

 

<style>

img.hz {

  width: 150px;

  height: 150px;

  object-fit: none;

  object-position: 10px 50px;

  border: 1px solid gray;

}

</style>

<img class="hz" src="https://picsum.photos/200/300" alt="랜덤이미지" width="200" height="300">

<h2>PS. 원본이미지</h2>

<img src="https://picsum.photos/200/300" alt="랜덤이미지" width="200" height="300">

결과보기

object-position 정의

 

컨테이너 내부 안의 '<img>/<video>'의 x,y 좌표 위치를 지정.

 

---

 

1. cf.

object-fit 속성 - 컨테이너 내부 안의 '<img>/<video>'의 자르는 방식 지정.

 

2.

• 기본값: 50% 50%  (※ 정중앙 의미)
• 상속여부: O
• 애니가능: O
• CSS버전: CSS3
• JS구문: object.style.objectPosition="0 30%";

 

3.

주요 최신 브라우저 모두 지원. (단, IE는 지원 X)

 

4. MDN object-position 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

 

object-position 구문

 

selector {object-position: position|initial|inherit;}

 

---

[속성값]

 

position

이미지 위치(x,y) 좌표값. (가능값 종류)

• 가능 문자: (x축: left, center, right), (y축: top, bottom)
• 가능 숫자: (px, %) 단위의 숫자 (※ 음수값도 가능)

 

initial

이 속성의 기본값을 사용.

 

inherit

부모요소으 속성값을 상속.