object-fit
요소의 크기에 맞게 <img>태그의 크기를 조정하는 방법으로 사용되는 속성
contain과 cover를 주로 사용한다 !
fill
- 요소의 크기에 맞게 보여준다.
contain
- 요소의 가로나 세로크기에 가능한 딱 맞춰져 크기가 조정된다. 비율은 그대로 유지된다.
cover
- 요소의 가로나 세로크기에 가능한 맞춰 크기가 조정되며 개체 크기게 맞게 잘린다.
- 요소에 가득 채울 때까지 확대된다.
none
- 크기가 조정되지 않고 원본사이즈로 처리된다
- 이미지가 크면 잘리고 작으면 남는다.
scale-down
- 크기가 아무것도 지정되지 않거나 혹은 contain이 적용 되어있는 것처럼 변경된다.
- 원본 크기가 작아지는 결과를 보여준다.
