CSS aspect-ratio - 가로 세로비율 조정하기

 aspect-ratio

aspect-ratio(종횡비)는 요소의 크기를 비율대로 조정할 수 있게 합니다.

만약 요소의 너비를 300px로 지정하고, aspect-ratio: 3/1을 하면 높이는 100px이 됩니다.

 

aspect-ratio는 div 뿐만 아니라 이미지, 테이블 등 모든 엘리먼트에 종횡비 적용이 가능하며,

앞에 하나만 지정했을 경우 높이는 1로 간주합니다.

 

aspect-ratio: 1/2;
aspect-ratio: 2;
aspect-ratio: auto;
aspect-ratio: auto 1 / 1; //요소가 고유한 종횡비를 가지는 경우 auto로 해당 종횡비를 따르며 그렇지 않은경우에는 원하는 비율로 지정합니다.

위와 같이 모든 브라우저에서 지원하는 css 속성입니다.

 

 

See the Pen Untitled by YONG JUN CHOI (@codeCYJ) on CodePen.

 

 

Image 비율 지키기

이미지가 늘어나거나 줄어들지 않고, 이미지 자체는 그대로 유지하며 종횡비만 조정하는 방법

- 이미지를 부모로 감싸고, 부모 요소에 aspect-ratio를 지정합니다.

   그 후 img에 object-fit: cover를 하면 이미지가 깨지지 않으면서 원하는 종횡비로 지정할 수 있습니다.

 

See the Pen Untitled by YONG JUN CHOI (@codeCYJ) on CodePen.

 

 

 

aspect-ratio 유의사항

 

1. 요소의 너비와 높이가 지정된 경우, aspect-ratio는 반영되지 않습니다.

 

See the Pen Untitled by YONG JUN CHOI (@codeCYJ) on CodePen.

 

 

2. 요소의 min 너비,높이 또는 max 너비,높이가 지정된 경우 예상치 못한 오류가 생길 수 있습니다.

 

See the Pen Untitled by YONG JUN CHOI (@codeCYJ) on CodePen.