[CSS] aspect ratio - 요소 가로세로 비율 지정하기

aspect-ratio?

언제 나왔는지는 모르겠으나 과거에는 css에서 비율로 요소를 조절할 수 없었다.

하나 이제부터 aspect-ratio 속성을 사용하여 비율을 지정할 수 있게 되었다.

 

aspect-ratio 속성은 주로 이미지나 동영상을 비율대로 줄이거나 늘리는데 활용되며 매우 직관적인 특징이 있다.

해당 속성으로 인해여 이제 요소를 width/height로만 지정하던 시대가 저물지 않을까 싶다.

 

일반적인 사용방법은 다음과 같다.

aspect-ratio: 1 / 1;
aspect-ratio: 1;

/* fallback to 'auto' for replaced elements */
aspect-ratio: auto 3/4;
aspect-ratio: 9/6 auto;

/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

• auto : 고유한 종횡비를 사용하는 옵션이다.
  고유한 종횡비가 있는 경우 해당 종횡비를 사용하며, 주로 단독으로 사용하기보다는 <ratio> 옵션과 함께 사용하는 게 좋다.
  <ratio> 옵션과 함께 사용할 경우 고유한 종횡비가 있는 경우 해당 종횡비를 사용하고 아니면 <ratio> 옵션을 적용한다.
• <ratio> : width / height 의 지정된 비율을 의미한다.
  만약 height값이 생략되어 하나만 단독으로 사용할 경우 width의 비율을 의미하며, height는 자동적으로 1로 설정된다.

aspect-ratio 사용 시 주의할 점

그냥 해당 옵션만 적용한다고 해서 비율이 설정되는 건 아니다.

반드시 "높이나 너비 둘 중 하나의 값이 고정 되어 있어야 한다."

말 그대로 "비율"을 설정하는 것이기 때문에 하나의 값을 기준으로 1을 잡고 비율을 결정하는 것이다.

 

몇 가지 적용이 잘 안되는 예외사항들에 대해 알아보자.

• width / height 설정이 없는 경우
  단, 상위요소에서 고정되어 있다면 그 값을 기준으로 사용할 순 있다. (ex. grid로 인한 너비 고정 포함)
• width / height 둘 다 고정된 값일 경우
  당연하게도 이미 높이와 너비가 고정되어 있기 때문에 비율 설정이 안 된다.
• width / height와 min-width / min-height를 같이 사용할 경우
  이는 적용이 안된다기보다는 의도와 다르게 적용될 수 있으니 주의해야 한다.
• 내용이 요소를 넘는 경우
  이미지나 동영상에 사용할 경우 매우 유용하나 텍스트 같이 요소를 넘어갈 수 있는 곳에는 생각보다 적용이 어렵다.
  내용이 요소를 넘는 경우 보통 자동적으로 확장되기 때문에 원하는 비율이 제대로 설정되지 않는다.

---

참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

aspect-ratio - CSS: Cascading Style Sheets | MDN