CSSで比率固定で可変の要素をスタイリングする方法！

以下のようなHTMLを用意して、

<div class="box ratio">
    <div class="inner">
        コンテンツ
    </div>
</div>

以下のようなCSSを適用します。

.box {
    position: relative;
    width: 100%;
    height: auto;
    background: #444;
}
.ratio:before {
    content: "";
    display: block;
    padding-top: 100%; /* ここを変えると比率が変わる */
}
.inner {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

ちなみに、上記のコメント部分の％を以下の数式で計算して入れると比率が変わります。

「縦比率　÷　横比率」を％に直して割り切れない場合は少数第二位まで。

例えば、
縦比率　：　横比率　＝　４　：　３
にしたければ、

４　÷　３　＝　１．３３３３・・・・

なので、上記padding-topには133.33%と入れればよい。