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

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

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

불러오는 중...

object-position: center;
object-position: left;
object-position: right;
object-position: 20px -20px;
object-position: top 100px right 0;

구문

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

브라우저 호환성

IEEdgeChromeSafariFirefox
미지원79*321036
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
104.4.332362.0
MDN BCD에서 가져오는 데이터입니다.

같이 보기

마지막 업데이트:
이 페이지를 오프라인에서 볼 수 있습니다.

sorto.me

CC BY-SA 4.0

based on MDN (contributors)