object-position

시도해 보기

object-position: 50% 50%;

object-position: right top;

object-position: left bottom;

object-position: 250px 125px;

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/proxy/developer.mozilla.org/shared-assets/images/examples/moon.jpg" />
</section>

#example-element {
  height: 250px;
  width: 250px;
  object-fit: none;
  border: 1px solid red;
}

구문

/* <position> 값 */
object-position: center top;
object-position: 100px 50px;

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

값

<position>

객체의 2D 위치를 지정하는 한 개에서 네 개의 값. 상대와 절대 오프셋을 사용할 수 있습니다.

형식 정의

형식 구문

object-position = 
  <position>  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<length-percentage> = 
  <length>      |
  <percentage>  

예제

이미지 콘텐츠 위치 지정

HTML

두 개의 <img> 요소가 MDN 로고를 가리키는 코드입니다.

<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />

CSS

다음 CSS는 두 <img> 요소 모두에 적용할 스타일과 함께, 각각 별도로 적용할 object-position 속성도 지정하고 있습니다.

img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}

첫 번째 이미지는 요소 박스의 왼쪽 경계로부터 10픽셀 떨어진 곳으로 배치됩니다. 두 번째 이미지는 요소 박스의 오른쪽 경계와 자신의 오른쪽 모서리를 서로 겹치고, 박스의 위쪽 경계로부터 박스 높이의 10% 떨어진 지점으로 배치됩니다.

ê²°ê³¼

명세

브라우저 호환성

같이 보기

• 이미지 관련 다른 CSS 속성: object-fit, image-orientation, image-rendering, image-resolution.