jQuery Box Prob

Question

我想解決一個使用jQuery的矩形問題。基本上，我有3個方形盒子固定在一個更大的盒子裏面。

我知道較大的盒子的最大寬度爲500px。我不知道1號，2號或3號的尺寸會是什麼 - 但我知道他們的長寬比可以改變，並且他們必須按比例適合放入箱子。

我該如何去確保無論哪種形狀 - 3個矩形總是在500px框內成比例尺寸？

Answer 1

經過求解方程組，我相信以下是真的。

w = Overall width (500) 
h = Overall height 
w1 = Width of B1 
h1 = Height of B1 
w2 = Width of B2 
h2 = Height of B2 
w3 = Width of B3 
h3 = Height of B3 
a1 = Aspect ratio of B1 (width/height) 
a2 = Aspect ratio of B2 (width/height) 
a3 = Aspect ratio of B3 (width/height) 

w1 = (500/a2 + 500/a3)/(1/a1 + 1/a2 + 1/a3) 

500像素，A1，A2，和A3是的已知，。求解w1，然後w2和w3。使用a1，a2和a3來確定h1，h2和h3。

我相信你的算法應該是：

1: Find w1 
w1 = (500/a2 + 500/a3)/(1/a1 + 1/a2 + 1/a3) 

2: Find w2 and w3 
w1+w2 = 500 
w1+w3 = 500 

3: Determine ideal h1, h2, and h3 via aspect ratio 
h1 = w1/a1 
h2 = w2/a2 
h3 = w3/a3 

4: Best-Fit h1, h2, and h3 
h = h1 = max(h2+h3, h1) 
h2 = h2 + ((h - (h2+h3))/2) 
h3 = h3 + ((h - (h2+h3))/2) 

這裏是我跟着

Eq1: w1/a1 = h1        [aspect ratio]     
Eq2: h1 = (h2 + h3)       [see diagram] 
Eq3: h2 = w2/a2        [aspect ratio] 
Eq4: h3 = w3/a3        [aspect ratio] 
Eq5: w2 = 500 - w1       [see diagram] 
Eq6: w3 = 500 - w1       [see diagram] 

w1/a1 = h1         [Eq1] 
w1/a1 = (h2 + h3)       [Eq2] 
w1/a1 = (w2/a2 + w3/a3)      [Eq3, Eq4] 
w1/a1 = ((500 - w1)/a2 + (500 - w1)/a3)  [Eq5, Eq6] 

w1/a1 = 500/a2 - w1/a2 + 500/a3 - w1/a3 
w1/a1 + w1/a2 + w1/a3 = 500/a2 + 500/a3 
w1 * (1/a1 + 1/a2 + 1/a3) = 500/a2 + 500/a3 
w1 = (500/a2 + 500/a3)/(1/a1 + 1/a2 + 1/a3)