object-fit: cover, contain

• object-fit: cover,
  • cover: 이는 background-size: cover와 같은 기능을 하게 된다.
  • 빈 공간에 대해서 가로 혹은 세로로 늘려주지만, 공간에 맞게 늘린다. 하지만 필연적으로 가로를 늘리면, 세로가 잘릴 수도 있고, 세로를 늘리면 가로가 잘리 수도 있다.
• contain
  
  • contain : 이것은 background-size: contain 와 같은 기능을 하게 되며, 이미지를 전체적으로 보여준다. 여백이 생기더라도 컨테이너 기준으로 해당 이미지를 무조건 연출하게 한다. 비율은 유지되며, 사이즈는 조정이 되어 보여지게 된다.
  • 위와 같은 내용으로, 어떤 이미지를 div공간 안에서 이미지의 전체 모습을 보여주게 하며, 여백이 생겨도 이미지를 전체적으로 보여주게 한다.