[css] object-fit

object-fit

object-fit은 대체 컨텐츠(<img> 또는 <video>)가 지정된 너비와 높이에 어떻게 맞추어질지를 지정합니다.

이 속성은 주로 이미지나 주로 비디오와 같은 미디어 요소에 적용되며, 해당 요소의 비율을 유지하면서 특정 너비와 높이 내에서 어떻게 배치될 지를 정할 때 유용하다.

• fill (기본값)
  이 값은 컨텐츠에 지정된 너비와 높이에 강제로 늘려서 맞춘다.
  이렇게 하면 원래의 비율이 변경될 수 있다.

• contain
  이 값은 컨텐츠의 원래 비율을 유지하면서 가능한 최대 크기로 컨텐츠를 확대/축소한다.
  결과적으로 컨텐츠 전체가 보이게 되며, 남는 공간이 있으면 그 공간은 빈상태로 남게 된다.

• cover
  이 값은 컨텐츠의 원래 비율을 유지하면서, 지정된 너비와 높이를 완전히 채울 때까지 컨텐츠를 확대, 축소한다.
  이렇게 하면 컨텐츠의 일부가 잘릴 수 있다.

• none
  이 값은 컨텐츠의 크기를 변경하지 않음

• scale-down
  이 값은 none, contain 중 더 작은 것으로 컨텐츠의 크기를 결정한다.