[解決済み] divをレスポンシブな正方形にする方法は？[重複しています。］

質問

divの高さが常に幅と同じになるように適応させたい。幅はパーセンタルです。親の幅が小さくなると、ボックスはアスペクト比を保って小さくなるはずです。

これをCSSで行うにはどうしたらよいでしょうか。

どのように解決するのですか？

ほぼ全てのブラウザで動作します。

を与えてみてください。 padding-bottom をパーセンテージで表示します。

<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>

外側のdivが正方形を作り、内側のdivにコンテンツを入れています。この解決策は何度も役に立ちました。

以下は jsfiddle