表示領域(高さ)のアスペクト比を保つレスポンシブcss

例1

<div>
<p>文章</p>
</div>

div {
    table-layout: fixed;
    background-color: #74992e;
    width: 100%;
    height: 50vw;  // 表示領域の50%をキープ
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

例2　内側に縦横比1:2のboxを横並びで2つ入れる場合

<div class=fr>

<div class=fr-in><p>文章</p></div>
<div class=fr-in><p>文章</p></div>

</div>

.fr {
  overflow: hidden;
}
.fr-in {
    float: left;
    table-layout: fixed;
    background-size: 100% auto;
    background-position: center;
    width: 50%;
    height: 25vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}