JQuery Box Проб

Question

Я пытаюсь решить проблему с прямоугольником, используя jQuery.По сути, у меня есть 3 квадратные коробки, которые фиксируются внутри большей коробки.

Я знаю, что большая коробка имеет максимальную ширину 500 пикселей.Я не знаю, каковы будут размеры 1, 2 или 3 - но я знаю, что их пропорции могут измениться и что они должны пропорционально вписываться в коробку.Неважно, какая форма - 3 прямоугольника всегда пропорционально измеряются внутри поля размером 500 пикселей?

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 px, 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)