Safari 이미지가 지정한 비율과 다를 때, aspect-ratio 설정법

세 줄 요약

aspect-ratio는 자동 크기 계산에 쓰이므로, 가로·세로가 모두 확정돼 있으면 크기를 바꾸지 못한다.
auto 16 / 9는 원본 비율이 있는 이미지가 로딩되면 그 비율로 돌아간다.
박스의 비율과 사진을 자르는 방식은 aspect-ratio와 object-fit으로 나눠 정한다.

비율 선언보다 가로·세로 설정을 먼저 읽는다

Safari에서 이미지에 aspect-ratio: 16 / 9를 줬는데 모양이 그대로라면, width와 height가 어떻게 결정되는지부터 봐야 한다. MDN의 속성 설명에 따르면 최소 한 축은 자동으로 계산돼야 비율이 크기에 영향을 준다. 예를 들어 CSS로 너비 320px, 높이 320px를 모두 지정한 박스는 비율 선언만으로 16:9가 되지 않는다.

확인한 설정	판단할 내용
가로·세로가 모두 확정된 값이다.	어느 축을 자동 크기로 바꿀지 정한다.
aspect-ratio에 auto와 비율이 함께 있다.	로딩 뒤 원본 비율을 쓰려는 설정인지 본다.
width와 height가 모두 auto다.	원본 크기·레이아웃 조건과 Safari의 해당 오류를 함께 비교한다.

CSS Sizing 4에서 이 값은 선호 비율이다. 최소·최대 크기 같은 제약도 결과에 영향을 준다. 비율을 적었다는 사실만으로 모든 레이아웃에서 같은 모양이 보장되는 것은 아니다.

16:9 카드와 사진의 잘림을 따로 정한다

카드 너비에 맞춰 높이를 계산하고 사진은 빈틈없이 채우려면, 한 축을 자동으로 남기고 object-fit을 함께 사용한다. 다음은 카드 안 이미지에 적용할 수 있는 기본 예다.

.card-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

object-fit: cover는 원본 사진의 비율을 유지하면서 박스를 채우고, 맞지 않는 부분은 자른다. 사진 전체가 보여야 한다면 contain을 사용하고, 남는 공간을 허용해야 한다. aspect-ratio로 정한 박스와 그 안의 이미지 내용은 이렇게 서로 다른 선택이다.

위 예에 다른 규칙의 고정 높이나 최소 높이가 덮이면 결과도 달라진다. 비율 값을 여러 번 바꾸기 전에 해당 이미지에 실제 적용된 크기 규칙을 읽는 편이 빠르다.

로딩 뒤 비율이 바뀐다면 auto를 확인한다

aspect-ratio: auto 16 / 9는 16:9를 끝까지 강제하는 선언이 아니다. 이미지의 원본 비율을 아직 모를 때는 지정한 비율을 쓰고, 로딩 뒤 원본 비율이 있으면 그것을 사용한다. 반면 auto 없이 비율만 지정하면 그 비율을 선호 비율로 사용한다.

Jake Archibald의 이미지 레이아웃 설명처럼 HTML의 width·height 속성도 로딩 전 공간을 확보하는 데 쓰인다. CSS로 height: auto를 두면서 원본에 맞는 두 속성값을 제공하는 방식은, 크기가 서로 다른 사진을 같은 모양으로 자르는 카드와 목적이 다르다. 원본 비율을 보존할지, 카드 비율을 통일할지 먼저 결정해야 한다.

두 크기가 auto인 Safari 오류는 별도로 비교한다

10월 22일 공개된 Safari Technology Preview 255는 가로·세로가 모두 auto인 대체 요소에서 aspect-ratio를 무시하던 오류를 수정했다. 대체 요소에는 이미지처럼 외부 콘텐츠가 들어가는 요소가 포함된다.

해당 조건이라면 같은 이미지와 CSS를 프리뷰에서 비교할 가치가 있다. 다만 macOS용 프리뷰의 수정 기록을 모든 정식 Safari와 iPhone의 수정 완료로 읽어서는 안 된다. 운영 페이지에서는 실패한 브라우저 버전, 로딩 전후의 상태, 적용된 크기 규칙을 함께 남겨야 한다. 카드 크기를 통일하려는 문제인지, 원본 비율을 보존하려는 문제인지 구분한 뒤 해당 설정과 브라우저 동작을 맞춰 보는 순서가 필요하다.