CSS object-fit: 대체 요소 콘텐츠 크기

CSS object-fit 속성은 <img>, <video>와 같은 대체 요소의 콘텐츠 크기를 요소 크기에 맞추는 방식을 설정합니다.

대체 요소 콘텐츠의 위치는 object-position 속성으로 바꿀 수 있습니다.

불러오는 중...

object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;

구문

/* 키워드 값 */
object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;

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

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

contain

대체 콘텐츠의 가로세로비는 유지하면서 크기를 조절해, 콘텐츠가 모두 보이는 크기로 요소를 채웁니다. 요소와 대체 콘텐츠의 가로세로비가 같지 않으면 콘텐츠의 상하 또는 좌우에 빈 공간(레터박스)이 생깁니다.

cover

대체 콘텐츠의 가로세로비는 유지하면서 크기를 조절해, 요소에 빈 부분이 없도록 콘텐츠로 가득 채웁니다. 요소와 대체 콘텐츠의 가로세로비가 같지 않으면 콘텐츠가 요소에 맞춰 잘려 보입니다.

fill

대체 콘텐츠의 크기를 조절해 요소에 빈 부분이 없도록 가득 채웁니다. 요소와 대체 콘텐츠의 가로세로비가 같지 않으면 콘텐츠를 늘립니다.

none

대체 콘텐츠의 크기를 조절하지 않습니다.

scale-down

containnone 중, 콘텐츠가 더 작은 크기로 보이는 값을 지정한 것과 같습니다.

명세

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)