当前位置：文江博客话题详情

jQuery 盒子问题

发布于 2024-12-06 05:43:13 字数 189 浏览 0 评论 0原文

我正在尝试使用 jQuery 解决矩形问题。基本上，我有 3 个方形盒子，固定在一个更大的盒子里。

我知道较大的盒子的最大宽度为 500 像素。我不知道 1、2 或 3 的尺寸是多少 - 但我知道它们的纵横比可以改变，并且它们必须按比例适合盒子。

我将如何始终确保无论什么形状 - 500px 框内的 3 个矩形始终按比例调整大小？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤蝉 2024-12-13 05:43:13

解出方程组后，我相信以下内容是正确的。

w = 总宽度 (500)
h = 总高度
w1 = B1 的宽度
h1 = B1 的高度
w2 = B2 的宽度
h2 = B2 的高度
w3 = B3 的宽度
h3 = B3 的高度
a1 = B1 的纵横比（宽度/高度）
a2 = B2 的纵横比（宽度/高度）
a3 = B3 的纵横比（宽度/高度）

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：查找w1
w1 = (500/a2 + 500/a3) / (1/a1 + 1/a2 + 1/a3)

2：找到w2和w3
w1+w2 = 500
w1+w3 = 500

3：通过长宽比确定理想的h1、h2和h3
h1 = w1/a1
h2 = w2/a2
h3 = w3/a3

4：最佳拟合 h1、h2 和 h3
h = h1 = 最大值(h2+h3, h1)
h2 = h2 + ((h - (h2+h3))/2)
h3 = h3 + ((h - (h2+h3))/2)

这是我遵循的步骤

Eq1: w1/a1 = h1 [纵横比]                
方程式2： h1 = (h2 + h3) [见图]
方程式3：h2 = w2/a2 [纵横比]  
方程式4：h3 = w3/a3 [纵横比]  
方程式5：w2 = 500 - w1 [见图]
方程式 6：w3 = 500 - w1 [见图]

w1/a1 = h1 [方程1]
w1/a1 = (h2 + h3) [方程2]
w1/a1 = (w2/a2 + w3/a3) [方程3，方程4]
w1/a1 = ((500 - w1)/a2 + (500 - w1)/a3) [方程5，方程6]

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)

After solving the system of equations, I believe the following is true.

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, and a3 are knowns. Solve for w1, then w2, and w3. Use a1,a2, and a3 to determine h1, h2, and h3.

I believe your algorithm should be:

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)

Here are the steps I followed

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)

回复收藏 0 原文

~没有更多了~