[CSS] aspect-ratio

aspect-ratio

• 요소의 가로 세로 비율을 지정하는 속성
• 상위 컨테이너나 뷰포트의 크기가 변경되더라도 브라우저는 지정된 종횡비를 유지하며 크기를 조정
• 속성은 :  auto, n, width / height  형태로 설정
• 반응형 작업 시 PC에서 고정으로 사용하던 이미지를 Mobile 100%로 가변 비율을 변경 시 이미지의 비율을 유지하기 

aspect-ratio: auto 

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

/* 콘텐츠 비율 우선, 없으면 설정값 사용 다만, 현재 브라우저 지원 낮아 잘 사용되지 않음*/
aspect-ratio: auto 3/4;


aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

계산 방법

• 가로가 기준인 경우 : 가로 / 세로
• 세로가 기준인 경우 : 세로 / 가로 
• ex ) 가로 300 x 세로 200 에서 가로 기준인 경우 : aspect-ratio: 1.5

/* 가로 588 x 세로 482 이미지를 width를 100%로 잡고 ratio 설정 시
 588/482 = 1.22..
*/
.box {
width: 100%;
aspect-ratio: 1.2; /* aspect-ratio:1.2 / 1 과 동일*/
}