게시판 목록이나 상품 목록에서 썸네일 이미지가 위아래로 눌리거나 옆으로 늘어나 보인다면, 이미지 박스의 비율은 aspect-ratio로 고정하고 이미지는 object-fit: cover로 채우는 방법이 가장 깔끔합니다.
관리자가 올리는 사진 크기가 제각각이어도 카드 높이가 일정하게 맞춰지고, 사진이 찌그러지지 않습니다.

1. 칸 비율은 aspect-ratio로 고정합니다

예전에는 padding-top: 56.25% 같은 꼼수로 16:9 박스를 만들었지만, 지금은 aspect-ratio 한 줄이면 됩니다. 크롬·엣지 88, 사파리 15, 파이어폭스 89부터 지원하니 현재 쓰이는 브라우저에서는 문제없이 동작합니다.

/* 썸네일 칸: 가로폭에 맞춰 4:3 유지 */
.thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f1f1f1;
}

2. 이미지는 object-fit으로 채웁니다

칸 안의 이미지에 object-fit을 주면 원본 비율을 지킨 채로 칸에 맞춰집니다. 목록 썸네일은 대부분 cover가 어울리고, 로고나 제품 누끼 이미지처럼 잘리면 안 되는 경우에는 contain을 씁니다.

.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 인물 사진은 위쪽 기준으로 */
  object-position: center top;
}

3. img 태그에 width, height도 적어 두세요

CSS로 크기를 정했더라도 <img> 태그에 원본의 width, height 값을 남겨 두면, 요즘 브라우저는 이미지가 내려오기 전에 그 비율만큼 자리를 먼저 잡아 둡니다. 목록이 로딩되면서 아래 글이 밀려 내려가는 현상(CLS)을 줄이는 데에도 도움이 됩니다.

<div class="thumb">
  <img src="/files/thumb/123.jpg"
    width="800" height="600"
    alt="리뉴얼한 회사 홈페이지 메인 화면"
    loading="lazy">
</div>

실제 유지보수 문의 중에는 "사진을 올리면 목록이 들쭉날쭉해진다"는 내용이 꽤 많습니다. 대부분 업로드할 때마다 사진을 잘라 올리는 방식으로 버티고 계셨는데, 위 CSS 몇 줄을 넣은 뒤로는 원본을 그대로 올려도 목록이 정돈되었습니다. 다만 cover는 가장자리가 잘리므로, 중요한 글자가 들어간 배너 이미지에는 쓰지 않는 편이 안전합니다.