object-fit

: 이미지를 보여주는 방식을 결정

 

1) object-fit : fill

- 기본값

- 브라우저에서 <img>의 크기를 정할려고 할 때 이미지가 왜곡 되어 보일 수 있음

 

2) object-fit: cover

- 이미지의 원래 비율을 지킴

- 이미지가 일부 짤릴 가능성 있음 

 

3) object-fit : contain

- 이미지에 짤리는 부분없이 비율을 지킴

- 이미지 안에 텍스트 존재의 경우 많이 사용

 

4) object-fit : none

- 정해진 width,height 무시하고 본래 크기대로 보여줌 

 

5) object-fit: scale-down

- 이미지가 주어진 영역(지정한 영역) 보다 작을 때는 none처럼 작용

- 이미지가 주어진 영역 초과시 contain처럼 작용