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

    같이 보기