[CSS] 반응형 이미지와 종횡비(Aspect-ratio) 유지하기

이번 포스팅에서는 [반응형 웹 요소] 파트의 세부 주제인 이미지 찌그러짐 방지와 최신 비율 제어법에 대하여 상세히 알아보겠습니다.

1. 이미지가 찌그러지지 않게 꽉 채우기: object-fit

다양한 크기의 이미지를 정사각형 썸네일 영역에 넣으면 이미지가 눌리거나 늘어납니다. 배경 이미지의 background-size: cover와 동일한 역할을 하는 속성입니다.

.thumbnail-img {
  width: 100%;
  height: 200px;
  /* 가로세로 비율을 유지하면서 요소에 꽉 차게 잘라냅니다 */
  object-fit: cover;
  /* 이미지의 어느 부분을 중심으로 자를지 결정 (기본값 center) */
  object-position: top center;
}

2. 16:9 유튜브 영상 비율 완벽 제어: aspect-ratio

과거에는 비율 유지를 위해 부모에 padding-bottom: 56.25%를 주는 복잡한 핵(Hack)을 사용했습니다. 최신 브라우저에서는 단축 속성을 제공합니다.

.video-container {
  width: 100%;
  /* 너비에 비례하여 높이를 자동으로 16:9 (유튜브) 비율로 유지 */
  aspect-ratio: 16 / 9;
}

---

지금까지 이미지 비율을 통제하는 object-fit과 aspect-ratio에 대해 살펴보았습니다. 더 이상 찌그러진 프로필 사진이나 검은 여백이 남는 영상을 방치하지 마세요.