CSS 데모: aspect-ratio 데모 버튼을 클릭해 보세요!
selector {
    aspect-ratio: auto || <ratio>;
    /*
        <ratio>:
         가로(숫자)/세로(숫자): 가로 대비 세로의 비율입니다.
         슬래시(/)가 없을 경우 가로/세로 비율의 값(숫자)입니다.
    */
}
div {
    background-color: orange;
    width: 200px;
    /*
        height가 지정되지 않았을 경우
        height는 auto입니다.
    */
    aspect-ratio: 1; /* '1/1'과 동일 */
}
<div>요소 박스</div>
실제 적용 모습
div {
    background-color: orange;
    width: 200px;
    aspect-ratio: 1;
    height: 50px;
    /*
        height 값이 auto가 아닐 경우
        aspect-ratio는 작동하지 않습니다.
    */
}
<div>요소 박스</div>
실제 적용 모습 height 값이 auto가 아닐 경우 aspect-ratio는 작동하지 않습니다.
.flex-box {
    display: flex;
    align-items: stretch; /* 주목해 주세요! */
}
.box-1,
.box-2 {
    width: 100px;
}
.box-1 {
    height: 200px;
    background-color: orange;
    margin-right: 15px;
}
.box-2 {
    background-color: red;
    height: auto;
    aspect-ratio: 1/1;
    /*
        align-items: stretch;를 적용 받는 요소는 
        aspect-ratio가 작동하지 않습니다.
    */
}
<section class="flex-box">
    <div class="box-1">요소 박스 - 1</div>
    <div class="box-2">요소 박스 - 2</div>
</section>
실제 적용 모습 align-items: stretch;를 적용 받는 요소는 aspect-ratio가 작동하지 않습니다.
div {
    background-color: orange;
    width: 200px;
    aspect-ratio: 100%; /* 퍼센트(%) 값은 사용 불가하여 작동하지 않습니다. */
}
<div>요소 박스</div>
실제 적용 모습 퍼센트(%) 값은 사용 불가하여 작동하지 않습니다.
<video src="flower.mp4" autoplay muted playsinline loop></video>
video {
    width: 250px;
    border: 1px solid red;
    aspect-ratio: 1/1;
}
실제 적용 모습
video {
    width: 250px;
    border: 1px solid red;
    aspect-ratio: 1/1;
    object-fit: cover; /* 빈 공간이 생기는 문제 해결 */
}
실제 적용 모습: object-fit: cover 적용

caniuse.com에서 더 자세한 정보를 확인해 보세요.