幅765ピクセル、高さ530ピクセルのコンテナdivがあるとします。
そのdivの多くを30個の小さなdivで動的に埋めたいです。コンテナのdivは長方形であるため、塗りつぶしのdivも長方形である必要があります。基本的に、正方形は必要ありません。スペースを埋めたいのです。
式は何ですか?
ありがとう!
30を使用すると、5 x 6のグリッドを作成できるため、高さを6で、幅を5で、または高さを5で、幅を6で除算します。divのサイズが整数である必要がある場合、幅または高さを埋めることはできません。ただし、どちらも6で割り切れないため、6を使用します。
したがって、各ピースの幅と高さを求めるには、N はピースの数 (この場合は 30)、H は埋めるボックスの高さ (この場合は 530)、W はボックスの幅です。塗りつぶし (この場合は 765)...
eachPieceWidth = floor(W/ceil(sqrt(N)))
eachPieceHeight = floor(H/(N/ceil(sqrt(N)))
につながる...
eachPieceWidth = floor(765/ceil(sqrt(30)))
eachPieceHeight = floor(530/(30/ceil(sqrt(30)))
につながる...
eachPieceWidth = 127
eachPieceHeight = 106
あなたの問題を少し詳しく説明できるかどうか見てみましょう.
widthw
と heightのコンテナーがあり、同じサイズの四角形h
で塗りつぶしたいとします。、、そのようなn
を見つけたいが、小さな長方形ができるだけ正方形に近くなるようにほぼ等しくしたい(それらがスライスの場合、おそらくほとんど役に立たないため) 美的にしたい喜ばしい。x
y
x * y = n
w/x
h/y
1xn
まず、n
が素数の場合、仮定を少し緩和する必要があるか、薄いスライスの束になってしまいます。それ以外の場合は、 のすべての因数を反復処理しn
、各因数についてx
計算y=n/x
してから および を計算w/x
しh/y
ます。次に、|w/x - h/y|
最小のペアを選択すると、コンテナのグリッドに収まる「正方形」の div が最も多くなります。
あなたの場合。w
=765 とh
=530。30 の係数は 1、2、3、5、6、10、15、30 です。次のペアを検討すると、結果として次の div サイズになります (切り捨てられます)。
この場合、ペアとの最小の差は(127, 106)
、数式を使用して出てきたものと同じですが、長くて薄いコンテナーがある場合、または何らかの理由で子 div を使用することを好んだ場合には当てはまらないことが想像できます。正方形ではない別のアスペクト比。その場合、最も適切な区分を選択します。