CSS 속성 object-fit은 요소가 포함된 컨테이너의 너비와 높이 내로 요소의 크기를 조정합니다. 배경 이미지는 이 속성을 사용하는 개발자가 접하게 되는 가장 일반적인 요소입니다.
개체 맞춤 속성에 대해 가능한 값은 5가지입니다. 다양한 값을 설명하기 위한 예시로 이미지를 사용하겠습니다.
- 개체 맞춤:포함 – 포함을 사용하면 컨테이너(이 경우 이미지)에 들어가는 요소의 종횡비가 유지됩니다. 비율이 일치하지 않으면 비율이 일치하지 않는 양쪽에 막대가 표시됩니다(와이드스크린 비디오가 출시되었을 때와 구형 TV에서는 화면 상단과 하단에 막대가 표시됨).
- 개체 맞춤:덮개 – 표지는 콘텐츠 상자를 채우는 동안 가로 세로 비율을 유지합니다. 가로 세로 비율이 일치하지 않으면 이미지가 맞게 잘립니다.
- 개체 맞춤:채우기 – 이 인스턴스에서 이미지는 원래 종횡비가 일치하는지 여부에 관계없이 요소의 콘텐츠 상자를 채우도록 크기가 조정됩니다. 이렇게 하면 이미지가 맞게 늘어납니다.
- 개체 맞춤:없음 – 이미지는 원래 크기를 유지합니다.
- 객체 맞춤:축소 – 축소 속성은 자동으로 없음을 선택합니다. 또는 포함 , 전체 이미지 크기가 작아집니다. 이 경우 축소는 포함을 선택합니다. :
이 속성에 대한 브라우저 지원은 매우 광범위합니다. 이전 Internet Explorer, Microsoft Edge 또는 Opera 브라우저용으로 개발 중인 경우 지원을 다시 확인하십시오.
결론
이 기사에서는 개체 맞춤 속성을 살펴보았습니다. 컨테이너를 삽입하고 채울 수 있는 요소에 사용됩니다. 속성은 가 컨테이너를 채우는 방식을 제어하기 위해
또는 다른 대체 요소에서 직접 사용됩니다. object-fit 속성을 object-position 속성과 함께 사용하여 요소가 컨테이너에 표시되는 방식을 제어합니다.