object-fit

object-fit 

img 또는 video 요소와 같은 대체요소의 크기를 조절하여 요소에 맞출것인지 지정

fill : 요소 컨텐츠 박스에 맞춰 컨텐츠 크기를 조절 (억지로 늘어나 비율 깨짐)

contain : 컨텐츠의 비율을 유지하면서 박스 내부에 들어가도록 크기를 조절한다

            (컨텐츠가 모두 보이게 줄어들어 박스와 비율이 맞지 않으면 여백이 생김)

cover : 컨텐츠의 비율을 유지하며 박스 내부를 가득 채운다. ( 박스와 비율이 맞지 않으면 컨텐츠가 잘림)

none : 컨텐츠의 크기를 조절하지 않음

scale-down : none 와  cotain중 컨텐츠의 크기가 작아지는 값을 선택