https://www.youtube.com/watch?v=cqAO2xR7lzM

크롬 업데이트를 하면 새로운 CSS 기능을!

Aspect-ratio

가로 세로 비율을 일정하게 고정시켜주는 CSS 속성

.square {
	/* 가로 세로 1:1 */
  aspect-ratio: 1 / 1;
}

.square {
  aspect-ratio: 16 / 9;
}

/* 지원하지 않는 브라우저 처리 */
@supports not (aspect-ratio: 16 / 9) {
  .square {
    height: 9rem;
    width: 16rem;
  }
}

예시

https://codepen.io/una/pen/xxZKzaX

.visual {
  aspect-ratio: 16/9;
  background: wheat;
  margin: 0.5rem 0;
}