CSS object-position: 대체 요소 콘텐츠 위치

ALATTA

CSS object-position: 대체 요소 콘텐츠 위치

CSS object-position 속성은 <img>, <video>와 같은 대체 요소의 콘텐츠를 요소에 배치할 위치를 조절합니다.

대체 요소 콘텐츠의 크기를 요소 크기에 맞추는 방식은 object-fit 속성으로 바꿀 수 있습니다.

img {
  object-position: center;
  /* object-position: left; */
  /* object-position: right; */
  /* object-position: 20px -20px; */
  /* object-position: top 100px right 0; */
}

img {
  width: 200px;
  height: 200px;
  border: 1px solid currentColor;
  object-fit: scale-down;
}

<img src="/assets/building.jpg">

불러오는 중...

구문

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

/* <percentage> 값 */
object-position: 25% 75%;

/* <length> 값 */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;

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

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

object-fit 속성에는 다음 중 하나의 키워드 값을 사용합니다.

값

<position>

콘텐츠의 2차원 위치를 정의합니다. 상대와 절대 오프셋 모두 사용할 수 있습니다.

명세

CSS Images Module Level 3

브라우저 호환성

MDN browser-compat-data
데스크톱모바일
iOSAndroid
SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
object-position

같이 보기