너비를 기준으로 높이를 동적으로 설정하려면 CSS/3에 어떤 것이 있습니까?

Question

예를 들어 우리는 항상 모양 비율 (가로 세로 비율)로 유지하기를 원하는 div가 있는데, CSS/3에는 내가 알지 못하는 이런 종류의 기능이 있습니까?

컨테이너의 너비는 100px입니다.

예 :
너비 : 100 %;
높이 : 너비의 100 %;
결과 : div 크기는 100px 너비와 100px 높이입니다.

---

예 2
폭 : 80 %
신장 60 %의 클로 폭;
결과 : div 크기는 폭 80px, 높이 48px입니다.

그런 점이 있습니까?
Css에는 이미 auto, vw 및 stuff가 있습니다. 해킹이 많이 있지만 괜찮은 해결책은 아직 없으며, 아니면 아무 것도 모르고 있습니다. 우리는 2016 년에 패딩으로 절대 해킹을 극복 할 수있는 방법이 없습니다. JS로이 문제를 간단하게 해결할 수는 있지만 그건 다른 이야기입니다.

편집 :

• 패딩 바닥은 그 절대의 내부 요소를 배치하도록 강제 주위 작업이다, 해결책이 아니다.
• vw는 화면을 기반으로하므로 적절하지 않습니다.

Answer 1

실제로 calc을 사용하고 동일한 기본 값을 사용할 수 있습니다.

div { 
 
    background-color: red; 
 
    width: 100vw; 
 
    height: calc(100vw * 0.5); 
 
}

<div></div>