어떻게 종횡비를 파괴하지 않는 상황에서 크기가 고르지 않은 이미지를 조정합니까

우리는 항상 크기와 가로가 다른 그림을 처리해야 한다.그러나 우리는 그것들을 용기에 넣어야 한다. 디자인의 아름다움을 유지하기 위해서, 우리는 보통 모든 이미지를 같은 크기로 조정하는 것을 선택한다.
하지만 지름길로 가는 것은 우리가 이 문제를 처리해야 한다는 것을 의미한다...

img {
  height: 200px;
  width: 200px;
}

이게 바로 그들의 모습입니다.🥴

이 그림들은 height와 width의 요구에 적응하기 위해 종횡비를 없앴지만 미학에는 진정한 도움이 되지 않는다.
그런데 우리가 CSS'img 속성에 코드를 한 줄 더 추가해서 이 문제를 해결할 수 있다는 것을 아십니까?

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

와!이번에 우리의 이미지는 그것들의 종횡비를 유지했다.