jQueryで追加するときに流体設計によるdivの幅と高さの比率を同じにしてください

Question

ありがとうございました。

私が達成したい：

1. は正方形である必要がありdivタグでウィンドウ全体を埋めます。
2. 1行に20個の正方形が必要です。
3. ページが読み込まれたときにjQueryを使用してそれらを追加したいとします。
4. 私はそれらが応答性であることを望んでいます。現在は、画面が風景から肖像画に変わるモバイルデバイスを考慮していません。さまざまなデスクトップデバイスの幅。

それぞれが異なる色を持っているので、私のjavascriptは、HTMLコンテナに異なるdivを.append（）するループです。

これはAPPEND内のコードです：

"<div class='square' style='background-color:" + color + "; width:5%; height:????;'></div>" 

私は自動高さが正方形の比率を維持するだろうと期待していたが、それはしていません。 jQueryを使用してdivのピクセルサイズを取得してから追加すると、それを使って高さを設定することができますが、そのアプローチではウィンドウのサイズが変更されるたびに同じことをする必要があるため、 。

これを達成するための考え方やアイデアはありますか？

ありがとうございました！

Answer 1

このpadding-bottomトリックを使用すると、反応するディメンションが一致するdivを作成できます。

Demo