object-fit

CSS object-fit 속성은 <img><video> 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다.

object-position 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있습니다.

구문

object-fit 속성은 다음 목록 중 하나의 키워드를 사용해 지정합니다.

contain
대체 콘텐츠의 가로세로비를 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절합니다. 콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로세로비를 유지하게 되므로, 서로의 가로세로비가 일치하지 않으면 객체가 "레터박스"처럼 됩니다.
cover
대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나갑니다.
fill
요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절합니다. 콘텐츠가 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 콘텐츠가 늘어납니다.
none
대체 콘텐츠의 크기를 조절하지 않습니다.
scale-down
nonecontain 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택합니다.

형식 정의

초기값fill
적용대상replaced elements
상속no
Computed valueas specified
Animation typediscrete

형식 구문

fill | contain | cover | none | scale-down

예제

이미지에 object-fit 지정

HTML

<section>
  <h2>object-fit: fill</h2>
  <img class="fill" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">

  <img class="fill narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">

  <h2>object-fit: contain</h2>
  <img class="contain" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">

  <img class="contain narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">

  <h2>object-fit: cover</h2>
  <img class="cover" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">

  <img class="cover narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">

  <h2>object-fit: none</h2>
  <img class="none" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">

  <img class="none narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">

  <h2>object-fit: scale-down</h2>
  <img class="scale-down" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">

  <img class="scale-down narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
</section>

CSS

h2 {
  font-family: Courier New, monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 940px;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}

.narrow {
  width: 100px;
  height: 150px;
  margin-top: 10px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}

결과

명세

Specification Status Comment
CSS Images Module Level 4
The definition of 'object-fit' in that specification.
Working Draft
CSS Images Module Level 3
The definition of 'object-fit' in that specification.
Candidate Recommendation Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
object-fitChrome Full support 31Edge Full support 16
Notes
Full support 16
Notes
Notes Edge supports object-fit on img elements only. See Edge issue 13603873 for details.
Firefox Full support 36IE No support NoOpera Full support 19
Full support 19
Full support 11.6
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari Full support 10WebView Android Full support 4.4.3Chrome Android Full support 31Firefox Android Full support 36Opera Android Full support 19
Full support 19
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS Full support 10Samsung Internet Android Full support 2.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기