CSS 이미지 비율

이미지 비율에 대한 속성을 알아보자.

aspect-ratio

요소의 기본 가로세로 비율을 설정하는 속성으로, 이미지 비율 유지를 위한 가장 직관적이고 간단한 방법이다.
이 속성은 대부분의 최신 브라우저에서 지원되지만 일부 브라우저나 버전에서는 지원되지 않기 때문에 대체 방법을 알아둬야 한다.

img {
  width: 300px;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

aspect-ratio 속성을 사용하여 가로와 세로의 비율을 2:1로 지정한다.
위의 속성을 사용하는 경우 이미지가 찌그러져 보일 수 있다.
object-fit 속성과 함께 사용하여 이미지가 찌그러지지 않고 요소를 꽉 채우도록 설정할 수 있다.

object-fit

이미지나 비디오가 지정된 크기의 컨테이너에 어떻게 맞춰질지 결정한다.

fill

기본값으로, 요소가 컨테이너를 가득 채우며 원래 비율이 변경될 수 있다.

contain

이미지가 비율을 유지하면서 컨테이너 내에 완전히 표시된다.
빈 공간이 생길 수 있습니다.

cover

비율을 유지하면서 컨테이너를 가득 채우며, 이미지의 일부가 잘릴 수 있다.

none

크기 조정 없이 원본 크기 그대로 표시한다.
이미지가 너무 큰 경우 이미지의 일부만 보일 수 있다.

scale-down

none과 contain 중 더 작은 것을 적용한다.

padding 백분율

padding의 백분율 값은 항상 부모 요소의 너비를 기준으로 계산된다.
이 특성을 이용하여 화면 크기에 맞는 일정한 비율을 유지하는 박스를 만들 수 있다.

div {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 50%; /* 2:1 비율 */
}

div img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

작동 원리

1. div의 height: 0
2. img의 padding-top: 50%
   padding의 %값은 너비를 기준으로 하기 때문에 div의 높이는 컨테이너의 너비 50%만큼의 값이 들어가게 된다.
   만약 4:1 비율로 만들고 싶다면 25%를 넣으면 된다.
3. img는 position: absolute
   이미지의 가로와 세로를 100%로 주고 위치를 왼쪽 상단으로 맞춘다.
   이미지의 원래 비율이 설정한 비율과 일치하지 않으면 이미지가 왜곡될 수 있다.
4. img는 object-fit: cover
   이미지가 컨테이너를 꽉 채우면서도 원래의 비율을 유지하도록 한다.
   이미지가 찌그러져 있었다면 원래 비율로 돌아온다.