[CSS] aspect-ratio 비율 조정하기

기존에는 div나 image의 비율을 고정하려면 직접 계산해서 width, height 값을 지정하거나 calc()를 사용했다.

하지만 원하는 비율을 쉽게 고정할 수 있는 방법이 있다.

 

aspect-ratio

사용법

.box { 
  width: 100px; /* 요소 가로길이 지정 */
  aspect-ratio: 16 / 9; /* 가로:세로 비율 지정 */
}

• 만약 하나의 값만 지정할 경우, 높이를 1의 비율로 간주한다.
• div 뿐만 아니라 이미지, 테이블 등 모든 엘리먼트에 종횡비 적용이 가능하다.
• width, height 중 하나의 값을 반드시 지정해야하며, 그게 기준이 된다.
  • 위의 예로 width 값을 지정했기 때문에 16 / 9는 가로(16) : 세로(9) 비율이 된다.
    만약 width 대신 height : 100px; 를 했다면 세로(16) : 가로(9) 비율이 될 것이다.
  • width, height 대신 max-, min- 를 사용할 수 있다.

 

 

aspect-ratio: auto 1/1;

• auto를 사용하면 고유한 종횡비가 있을 때 해당 비율을 따르고 없으면 1/1 비율을 따른다는 뜻이 된다.
• 이미지는 원본 비율이 있으므로 주로 이미지에서 사용된다.

 

 

 

 

---

참고자료

• https://inpa.tistory.com/entry/CSS-📚-이미지-비율-고정하는-방법-aspect-ratio [Inpa Dev 👨‍💻:티스토리]