object-fit

object-fit 이란 ?

 

요소의 크기에 맞게 이미지 와 비디오의 크기를 조절하는 방법으로 사용되는 속성이다.

[ img ], [ video ]

 

속성값	설명
fill	[ 기본값 ] 요소의 크기에 맞춰 꽉 채워 보여준다.
contain	가로, 세로 크기에 맞춰서 크기가 조정되고 비율은 고정된 상태. [ 공간이 남을 수 있다. ]
cover	가로, 세로 크기에 맞춰서 크기가 조정되고 비율은 고정된 상태. [ 개체 크기에 맞게 잘린다. 가득 채울 때 까지 확대 ]
none	원본 사이즈로 처리된다. [ 보다 크다면 잘리고 작으면 남는다. ]
scale-down	크기가 지정되지 않거나 comtain이 지정되어 있는 것 처럼 변경. [ 원본 크기보다 작아지는 결과를 보여준다. ]