[CSS] aspect-ratio 속성 이용하여 반응형 비율 조정

aspect ratio

aspect ratio 속성은 박스, 이미지, 동영상을 정해둔 비율대로 줄이거나 늘릴 수 있어 반응형 디자인에 탁월합니다.

aspect ratio 브라우저 접근성

internet explore에선 지원하지 않기 때문에 사용할 시에는 환경을 잘고려해야합니다.

aspect-ratio 사용법

width:200px;
background:red;
aspect-ratio: 16/9;    // 16:9비율로 지정
aspect-ratio: 4/3;     // 4:3비율로 지정 원하는 비율로 설정해주면 됩니다.

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