컨테이너의 크기에 맞게 이미지 또는 비디오 요소의 크기를 조정하는 방법을 지정한다.
fill | contain | cover | none | scale-down
대체된 콘텐츠의 크기는 요소의 콘테츠 상자에 맞으면서 자연스러운 종횡비를 유지하도록 조정된다.
대체된 콘텐츠는 종횡비를 유지하면서 요소의 콘텐츠 상자 전체를 채우도록 크기가 조정된다.
대체된 내용은 요소의 콘텐츠 상자를 채우도록 크기가 조정된다.
대체된 콘텐츠는 요소의 콘텐츠 상자에 맞게 크기가 조정되지 않는다. 지정된 크기가 없는 기본 크기 조정 알고리즘을 사용하여 개체의 크기를 결정한다. 기본 개체의 크기는 대체된 요소의 사용된 너비 및 높이와 동일하다.
none
또는 contain
이 지정된 것처럼 콘텐츠의 크기를 조정한다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
대체된 내용은 요소의 콘텐츠 상자를 채우도록 크기가 조정된다.
컨텐츠 상자에 채우도록 한다.
대체된 콘텐츠의 크기는 요소의 콘테츠 상자에 맞으면서 자연스러운 종횡비를 유지하도록 조정된다.
대체된 콘텐츠는 종횡비를 유지하면서 요소의 콘텐츠 상자 전체를 채우도록 크기가 조정된다.
대체된 콘텐츠는 요소의 콘텐츠 상자에 맞게 크기가 조정되지 않는다. 지정된 크기가 없는 기본 크기 조정 알고리즘을 사용하여 개체의 크기를 결정한다. 기본 개체의 크기는 대체된 요소의 사용된 너비 및 높이와 동일하다.
none
또는 contain
이 지정된 것처럼 콘텐츠의 크기를 조정한다.
object-fit: cover;
element.style.objectFit = "cover";
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Images Module Level 3 | 편집자 초안 | Last review date: 2022-6-3 |