CSS:ボックスの横幅に対して縦を比率拘束して変動させる

例えば背景画像を設定した空のボックス、position:absolute;などで配置したスライダーの領域確保などボックスの縦サイズが欲しい場合がありますが、中々面倒です。
spacer画像を透過pngで作成などと昔ながらの方法もありますが、擬似要素を利用してpaddingで高さを確保する方法は少しスマートでそれほど違和感もないですね。

    div{
            display: flex;
        }
    div::before {
            content:"";
            display: block;
            padding-bottom: 75%;
            /*  600/800 = 0.75  75% */
        }
まだ投票されていません