[CSS] object-fit 를 사용하여 컨텐츠 크기 자동 조절

object-fit 속성은 img나 video와 같은 요소의 컨텐츠 크기를 조절할때 사용하는 CSS 입니다. 속성 값에 따라 자동적으로 크기가 변경이 됩니다.

1. fill

   fill 속성을 사용하면 가로세로 비율과 상관없이 부모 엘리먼트를 전부 채우도록 설정이 됩니다. 기본값으로 사용이 됩니다.

   

2. contain

   contain 속성을 사용하면 가로세로 비율을 유지하면서 부모 엘리먼트 내부에 맞도록 사이즈를 조절합니다. 비율을 유지하기 때문에 fill 속성처럼 부모 엘리먼트에 완전히 채워지지 않을 수 있습니다.

   

3. cover

   cover 속성을 사용하면 가로세로 비율을 유지하면서 부모 엘리먼트를 전부 채우도록 사이즈를 조절합니다. 이에 따라 컨텐츠가 잘려 보이지 않을 수 있습니다. 이때, 컨텐츠가 가운데 정렬이 되어 위치하게 됩니다.

   

4. none

   컨텐츠의 사이즈를 조절하지 않습니다.

5. scale-down

   none 과 contain 중 컨텐츠의 크기가 더 작아지는 값을 선택합니다.

❗ 1. 컨텐츠의 width와 height를 100%로 설정 했을 시 `object-fit`이 적용이 됩니다.
  2. IE 11은 사용이 불가능합니다.