이미지를 aspect-ratio에 싸서 드셔 보세요

개발을 하다 보면 이미지나 영상, 혹은 특정 요소의 비율을 고정해야 하는 상황이 생각보다 자주 생긴다. 골치 아프게 따로 계산할 필요없이, aspect-ratio라는 속성이 생겨서 훨씬 간단하게 해결할 수 있다. 오늘은 이 속성에 대해서 정리해보려고 한다.

aspect-ratio란?

aspect-ratio는 요소의 가로 세로 비율을 고정할 수 있는 CSS 속성이다. 쉽게 말하면 너비가 변하더라도 항상 지정한 비율을 유지하도록 만들어준다.

.box {
  width: 100%;
  aspect-ratio: 16 / 9;
}

위 코드처럼 width만 지정하고 aspect-ratio를 설정하면, height를 따로 지정하지 않아도 자동으로 16:9 비율에 맞는 높이가 계산된다. 반대로 height만 지정하고 너비를 비율에 맞게 만들 수도 있다.

예전 방식과 비교

예전에는 비율을 고정하기 위해 아래와 같은 padding-top 트릭을 사용했다.

/* 16:9 비율 만들기 */
.wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9 / 16 * 100 */
}

.inner {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

동작은 하지만 구조가 복잡해지고, 비율을 바꾸려면 계산도 해야 하는 번거로움이 있었다. aspect-ratio 하나면 이 모든 걸 대체할 수 있다.

다양한 사용 예시

정사각형 썸네일

.thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1; /* 1이라고만 써도 됨 */
  object-fit: cover;
}

유튜브 임베드

반응형으로 유튜브 영상을 넣을 때 정말 유용하다.

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

카드 컴포넌트

.card-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

주의할 점

width와 height가 둘 다 명시적으로 지정되어 있으면 aspect-ratio는 무시된다. 비율을 고정하고 싶다면 둘 중 하나만 지정해야 한다는 점을 기억해두자.

그리고 img 태그에 사용할 때는 object-fit: cover나 object-fit: contain을 함께 쓰는 게 거의 필수다. 비율은 고정됐는데 이미지가 찌그러지면 의미가 없으니까.

img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover; /* 비율 유지하면서 꽉 채우기 */
}

브라우저 지원

크롬 88+, 파이어폭스 89+, 사파리 15+부터 지원한다. 사실상 현시점에서 IE를 제외하면 모든 주요 브라우저에서 사용할 수 있기 때문에 실무에서 편하게 써도 된다.

알고 나면 별거 아닌데 모르면 자꾸 padding-top 계산기를 두드리게 되는 속성이다...... 앞으로는 aspect-ratio 하나로 깔끔하게 해결하자!