Properties

Properties

Editing
  • account_tree
  • bug_report

object-fit

컨테이너의 크기에 맞게 이미지 또는 비디오 요소의 크기를 조정하는 방법을 지정한다.

사용 가능한 값 타입

<'object-fit'>

DEVDIC-Specified Data Types

object-fit 속성에 사용되는 타입이다.

  • CSS Images Module Level 3
    fill | contain | cover | none | scale-down

사용되는 키워드

  • contain

    대체된 콘텐츠의 크기는 요소의 콘테츠 상자에 맞으면서 자연스러운 종횡비를 유지하도록 조정된다.

  • cover

    대체된 콘텐츠는 종횡비를 유지하면서 요소의 콘텐츠 상자 전체를 채우도록 크기가 조정된다.

  • fill

    대체된 내용은 요소의 콘텐츠 상자를 채우도록 크기가 조정된다.

  • none

    대체된 콘텐츠는 요소의 콘텐츠 상자에 맞게 크기가 조정되지 않는다. 지정된 크기가 없는 기본 크기 조정 알고리즘을 사용하여 개체의 크기를 결정한다. 기본 개체의 크기는 대체된 요소의 사용된 너비 및 높이와 동일하다.

  • scale-down

    none 또는 contain이 지정된 것처럼 콘텐츠의 크기를 조정한다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • 〈'object-fit'〉fill
    CSS3, CSS Images Module Level 3

    대체된 내용은 요소의 콘텐츠 상자를 채우도록 크기가 조정된다.

    컨텐츠 상자에 채우도록 한다.

    Example
  • CSS Images Module Level 3

    대체된 콘텐츠의 크기는 요소의 콘테츠 상자에 맞으면서 자연스러운 종횡비를 유지하도록 조정된다.

    Example
  • CSS Images Module Level 3

    대체된 콘텐츠는 종횡비를 유지하면서 요소의 콘텐츠 상자 전체를 채우도록 크기가 조정된다.

    Example
  • 대체된 콘텐츠는 요소의 콘텐츠 상자에 맞게 크기가 조정되지 않는다. 지정된 크기가 없는 기본 크기 조정 알고리즘을 사용하여 개체의 크기를 결정한다. 기본 개체의 크기는 대체된 요소의 사용된 너비 및 높이와 동일하다.

  • none 또는 contain이 지정된 것처럼 콘텐츠의 크기를 조정한다.

구문

  • object-fit: cover;
    CSS Images Module Level 3
  • element.style.objectFit = "cover";
    CSS Images Module Level 3

테스트 도구

컨테이너 안의 이미지의 크기 설정 결과 테스트

버전 명세

Modules
Module NameStatusSummary
CSS Images Module Level 3편집자 초안

Last review date: 2022-6-3

지원 웹브라우저