CSS 이미지 비율 맞추기, 이미지 사이즈 맞추기 (object-fit)

img {
  width: 300px;
  height: 150px;
  object-fit: cover;
}

object-fit

• fill (기본값) : 주어진 너비와 높이에 딱 맞도록 사이즈를 조절, 비율 조정 X
• contain : 가로세로 비율을 유지한 채로 사이즈가 조절, 비율 조정에 의해 빈 공간이 생김.
• cover : 가로세로 비율을 유지한 채로 사이즈가 조절, contain과 다르게 이미지를 확대해 컨테이너를 완전히 채움.
• none : 아무것도 하지 않고 본래의 이미지 사이즈를 유지함. 이미지가 사이즈가 큰 경우 중앙을 기준으로 사이즈를 조절함.
• scale-down none 또는 contain 중에 더 적절한 방향으로 이미지 사이즈를 조절.

* IE 지원 안한다고 알고 있음.