高さ不明のブロック要素の比率を維持する

レスポンシブでブロック要素（div）を比率を維持しながら可変にしたい。
画像は比率を維持しながら勝手にウィンドウサイズに合わせてサイズが変更されるが、ブロック要素では高さを明確にしない限り難しい。

CSSは、高さ方向にpaddingを%で指定した場合、基準値をwidth(100%)から取得する。
要するに、widthの値が変化すると、paddingの値も同じ量だけ変化するということ。
それを利用することで、widthが可変した時に、高さ方法のpaddingも一緒に移動する。

<div class="adjust-box">
    <div class="inner">
        ブロック要素の中身
    </div>
</div>

.adjust-box {
    position: relative;
    width: 50%;
    height: auto;
}
.adjust-box:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.inner {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}
.adjust-box p {
    line-height:1.5em;
}

【CSSテクニック】ブロック要素の比率を維持しながら可変させる方法