object-fit은 특정 영역 안에 컨텐츠를 채우는 속성
background-size 속성 (cover, contain)과 비슷한 느낌이지만
background-size가 배경 이미지를 다룬다면,
object-fit은 어떤 요소든 제한없이 영상, 이미지든 특정 영역 안에 이미지를 채울 수 있는 속성
- 기본 width = 100% , height = 100% 줬을 때
이미지가 약간 눌려 보인다.
- 순서대로
object-fit:fill : width, height 100%를 줬을때와 차이가 없다. 찌그러지더라도 꽉 채운다.
object-fit:cover : 이미지가 짤릴지 언정 이미지 비율을 유지하며 꽉 채운다 (background-size : cover 와 비슷한 효과)
즉, 값을 cover 로 지정하면 이미지의 가로, 세로 길이 모두 요소보다 크다는 조건하에 가능한 이미지를 작게 조정한다. 가로, 세로 비율은 유지된다.
따라서 이미지의 크기는 요소의 크기보다 항상 크거나 같다.
object-fit:contain : 여백이 생길지 언정 이미지를 자르지 않고 꽉 채운다.
즉, contain 값을 지정하면, 이미지의 가로, 세로 모두 요소보다 작다는 조건하에 가능한 크게 조정된다. 이미지의 가로, 세로 비율은 유지된다. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같다.
설명 중에서 "가능한"의 의미 : 짤릴 수도 있다.
under the hood